Redux: `combineReducers` 문서는 리듀서에 전달할 상태 부분을 추측하는 방법을 설명하지 않습니다.

건너 뛰지 않고 완전히 읽으면 다음과 같이 말합니다.

결과 리듀서는 모든 자식 리듀서를 호출하고 그 결과를 단일 상태 객체로 수집합니다. 상태 객체의 모양은 전달된 리듀서의 키와 일치합니다.

그러나 사람들이 종종 이 문장을 놓치기 때문에 이것이 더 두드러져야 한다는 데 동의합니다.
#399의 변경 사항이 도움이 될까요?

나는 컴퓨터 과학을 덜 선호하고, 예를 든 직후에 이 규칙 에 대해 명시적으로 언급합니다.

리듀서의 이름은 todos 및 counter -- 정확히 우리가 전달하는 상태의 일부입니다.

상태의 일부를 리듀스에 전달하기 위해 Redux는 _convention_을 사용합니다. 리듀서는 전달하려는 상태의 일부로 정확히 이름을 지정 해야 합니다.

#399가 좋은 것 같지만 _Flux 사용자_를 위한 설명입니다. 나는 보트의 신선한 Redux에 오고 있습니다. 내 텍스트의 일부 형태는 캐주얼 JavaScript 개발자에게 더 도움이 될 것입니다.

중요한 아이디어는 다음과 같습니다. 규칙은 API의 일부입니다 . 이는 createRedux , createDispatcher 및 기타 API 함수에도 똑같이 중요합니다. API의 일부이기 때문에 항상 명시적으로 규약을 명시하십시오.

Btw, 나는 여전히 상태의 하위 부분을 감속기에 전달하는 방법에 대해 의아해합니다. 내가 camelCase 그들 또는 뭔가 가입해야합니까? state={owner: {name: 'John'} } → export function ownerName(state = [], action) ?

피드백 주셔서 감사합니다. 매우 가치가 있습니다.

나는 그것을 강조하고 싶다

컨벤션은 API의 일부입니다

사실이 아닙니다.

문서에서 import * 는 피해야 합니다. 왜냐하면 사람들은 이것이 API의 필수적인 부분이 아닐 때 필수 요소라고 가정하고 제가 사용하는 편리한 바로 가기일 뿐입니다.

함수 이름은 ES6 export 및 import * as 작동 방식 때문에 중요합니다.

Btw, 나는 여전히 상태의 하위 부분을 감속기에 전달하는 방법에 대해 의아해합니다. 내가 camelCase 그들 또는 뭔가 가입해야합니까? state={소유자: {이름: 'John'} } → export function ownerName(state = [], action)?

아니 :-). 그것은 마법의 API가 아닙니다. combineReducers(object) 는 여러 감속기를 하나로 결합하고 제공한 키로 상태의 일부를 값으로 전달합니다. 정확히 한 수준 깊이에서만 이 작업을 수행합니다. "나무 전체를 만드는 마법"은 없습니다. 감속기를 더 많은 기능으로 나누는 것은 당신에게 달려 있습니다.

// Function names don't matter!
function processA(state, action) { ... }
function doSomethingWithB(state, action) { ... }

function reducer(state = {}, action) {
  return {
    // Because you call them!
    a: processA(state.a, action),
    b: doSomethingWithB(state.b, action)
  };
}

// Not using combineReducers
let store = createStore(reducer);

직접 객체를 생성하는 한 combineReducers 도우미 를 사용해 도 상관 없습니다.

// Function names don't matter!
function processA(state, action) { ... }
function doSomethingWithB(state, action) { ... }

/*
function reducer(state = {}, action) {
  return {
    a: processA(state.a, action),
    b: doSomethingWithB(state.b, action)
  };
}
*/
let reducer = combineReducers({
  a: processA,
  b: doSomethingWithB
});

let store = createStore(reducer);

이 작업을 여러 번 수행할 수 있습니다.

전에:

// Function names don't matter!
function processSomePartOfA(state, action) { ... }
function doSomethingWithOtherPartOfA(state, action) { ... }

function processA(state, action) {
  return {
    // Because you call them!
    somePart: processSomePartOfA(state.somePart),
    otherPart: doSomethingWithOtherPartOfA(state.otherPart)
  }
}
function doSomethingWithB(state, action) { ... }

function reducer(state = {}, action) {
  return {
    // Because you call them!
    a: processA(state.a, action),
    b: doSomethingWithB(state.b, action)
  };
}

// Not using the helper
let store = createStore(reducer);

알겠어? 함수를 호출하는 함수일 뿐입니다. 마법의 "깊은 물건"이 없습니다.
combineReducers 여러 번 사용할 수 있습니다.

// Function names don't matter!
function processSomePartOfA(state, action) { ... }
function doSomethingWithOtherPartOfA(state, action) { ... }

/*
function processA(state, action) {
  return {
    somePart: processSomePartOfA(state.somePart),
    otherPart: doSomethingWithOtherPartOfA(state.otherPart)
  }
}
*/
let processA = combineReducers({
  somePart: processSomePartOfA,
  otherPart: doSomethingWithOtherPartOfA
});

function processA(state, action) { ... }
function doSomethingWithB(state, action) { ... }

/*
function reducer(state = {}, action) {
  return {
    a: processA(state.a, action),
    b: doSomethingWithB(state.b, action)
  };
}
*/
let reducer = combineReducers({
  a: processA,
  b: doSomethingWithB
});

let store = createStore(reducer);

문제 함수 이름은 사용할 때입니다 유일한 부분 export + import * as 에 당신이에 전달 객체 "취득" combineReducers _that이기 때문에 얼마나 import * works_ ! 내보내기 키를 기반으로 물건을 객체에 넣습니다.

내 가장 큰 실수는 독자가 명명된 내보내기에 익숙하다고 가정하는 것입니다.

내 가장 큰 실수는 독자가 명명된 내보내기에 익숙하다고 가정하는 것입니다.

독자가 ES6에 익숙하다고 가정하는 것은 무리라고 생각합니다. 그러나 그것이 사람들이 배우고 이것을 알아내도록 만드는 것입니다. 따라서 읽기가 독자의 지식과 경험보다 앞서 있다는 것은 실제로 좋은 일입니다.

우리는 명시 적으로 호출하는 예제를 변경하고 combineReducers 에서 reducers/index 가 지금부터 더 의미를 만들려고, 그래서 희망 : https://github.com/gaearon/redux/pull/473

이것은 현재 문서에서 더 잘 다루어지는 것처럼 보이기 때문에 닫습니다.
그리고 문서에서도 더 이상 import * 를 사용하지 않습니다.

그런 암시적 동작을 포함하는 것이 좋은 코딩 방법이라고 정말 생각하십니까?

나에게 그것은 코드를 난독화하고 CombineReducer가 존재해서는 안되며, 불필요한 추상화 단계를 추가하고 프로세스를 복잡하게 만듭니다.

프레임워크를 작성할 때 이와 같은 중요한 기능은 쉽게 이해할 수 있어야 합니다. 예를 들어 "마법 같은" 느낌은 그렇지 않습니다.

추신 : 나는 공식 Redux 문서에서 왔습니다 : "마법이 아닙니다"