Redux: createStore에서 initialState를 제공한 다음 CombineReducers는 초기화 중에 정의되지 않은 반환된 내 감속기 중 하나를 표시합니다.

이것은 지원 시스템이 아닌 버그 추적기입니다. 사용 질문은 스택 오버플로 또는 Reactiflux를 사용하십시오. 감사 해요!

같은 문제가 있습니다.

단계:

1. 이미지 단순 상점 모양 { foo, bar } .
2. simpleReducer = state => state 와 같은 간단한 감속기를 만듭니다.
3. reducers = combineReducers({ foo: simpleReducer, bar: simpleReducer }) 에서 감속기를 결합합니다.
4. createState(reducers, { foo: Obj1, bar: Obj2 }) 초기값으로 상태를 생성합니다.
5. 오류 Reducer "foo" returned undefined during initialization. If the state passed to the reducer is undefined, you must explicitly return the initial state

이유는 초기 상태 부분을 얻기 위해 정의되지 않은 상태 로 실행 하는 assertReducerShape 입니다. 내 간단한 감속기는 이 경우 정의되지 않은 인수를 반환합니다. createState 호출의 Obj1 가 foo-part의 초기 상태로 간주되지 않는 이유는 무엇입니까?

@timdorr 문제를 다시 열 수 있습니까?

해결 방법은 simpleReducer = (state = null) => state 를 만드는 것입니다. 하지만 괜찮아?

combineReducers 하면 각 슬라이스 리듀서는 해당 상태 슬라이스를 "소유"해야 합니다. 즉, 현재 슬라이스가 정의되지 않은 경우 초기 값을 제공하고, 그렇게 하지 않는 경우 combineReducers 가 알려줍니다.

'초기 상태'에는 여러 가지 의미가 있습니다. reducer의 기본 반환 값과 createStore의 두 번째 인수입니다. 문제가 있다고 생각합니다. CombineReducers가 initialState 및 createState에 대한 리듀서를 확인하지 않는 이유를 설명할 수 있습니까?

@Vittly : combineReducers 는 고의적으로 의견이 분분한 반면 createStore 는 그렇지 않습니다. createStore 는 여러분이 부여한 루트 리듀서 함수를 단순히 호출하고 결과를 저장합니다. combineReducers 는 그것을 사용하는 경우 상태가 어떻게 구성되어야 하고 결합된 리듀서가 어떻게 작동해야 하는지에 대한 특정 가정 세트를 구매한다고 가정합니다.

combineReducers 이(가) 독단적이며 어떤 의견을 가지고 있는지에 대한 역사와 세부 사항에 대해 설명하는 #191 및 #1189를 읽고 싶을 수도 있습니다.

따라서 문제는 (간단히) "리듀서를 결합하는 경우 저장소 트리도 분할하고 무언가를 놓치거나 createStore 2nd 인수에서 의도적으로 저장소의 일부만 미리 로드할 수 있습니다. 저장소 트리를 보다 일관성 있게 사용하려면 assertReducerShape를 사용하십시오." 좋아요, 심판 감사합니다

같은 문제가 있습니다.
그래서 createStore 하고 초기 상태를 전달합니다. 하지만 reduct.js 파일에서 assertReducerShape redux 함수는 undefined 상태를 전달할 때 내 감속기를 확인합니다.

IMHO 이것은 버그입니다.

@JoseFMP : 나는 당신이 보고 있는 모든 것이 버그가

확신하는. Stackoverflow에서 문제가 되는 문제를 제출했습니다.
https://stackoverflow.com/questions/53018766/why-redux-reducer-getting-undefined-instead-of-the-initial-state

문제는 매우 간단합니다. 그래서 스토어를 생성할 때 초기 상태를 설정했다면 왜 redux가 undefined 상태로 리듀서를 평가하려고 할까요? 그러면 실제로 모든 감속기가 새 상태 undefined 를 반환합니다.

그러나 초기 상태를 전달하기 때문에 넌센스입니다.
그래서 이것은 실패하고 있습니다:

import { combineReducers, createStore } from 'redux';

const configReducer = (config: any, action: any): any =>{
        return config;
}

const customData = (customData: any, action: any): any =>  {
        return customData;
}
const reducers = combineReducers({config: configReducer, customData: customDataReducer})

const defaultConfig = "cool config";
const data = "yieaah some data";

var initialState = {config: defaultConfig, customData: data};
const store = createStore(reducers, initialState) // at this point redux calls all the reducers with 'undefined' state. Why?

@JoseFMP :

아, 문제가 뭔지 알 것 같아요. 이것은 combineReducers() 작동 방식에 따라 다릅니다.

combineReducers 는 당신이 제공하는 모든 "슬라이스 리듀서"가 몇 가지 규칙을 따를 것으로 예상합니다. 특히, 감속기가 state === undefined 로 호출되면 _if_ 적절한 기본값을 반환할 것으로 예상합니다. 이를 확인하기 위해 combineReducers() 는 실제로 (undefined, {type : "SOME_RANDOMIZED_ACTION_TYPE"}) 로 감속기를 호출하여 정의되지 않은 값을 반환하는지 "실제" 값을 반환하는지 확인합니다.

감속기는 현재 전달된 것을 반환하는 것 외에는 아무 것도 하지 않습니다. 즉, state 가 정의되지 않은 경우 _return_ undefined가 됩니다. 따라서 combineReducers() 는 예상한 결과를 깨고 있음을 알려줍니다.

선언을 configReducer = (config = {}, action) 등으로 변경하면 경고가 수정됩니다.

다시 말하지만, 이것은 버그가 _아닙니다_. 이것은 행동 검증입니다.

Hej @markerikson 응답
몇 가지 의견:

1) 아니요, combineReducers 국한되지 않습니다. combineReducers 사용하지 않고 나만의 루트 리듀서를 구현해도 같은 일이 발생합니다.

2) 여기서 불일치는 Redux 문서에서 리듀서가 알 수 없거나 예상치 못한 상태로 호출되는 경우 상태를 수정하지 않고 인수로 제공된 값을 반환해야 한다고 언급되어 있다는 것입니다. 이 받으면 IE는 ... undefined 그 다음에 반환해야합니다 undefined . 그러나 또 다른 규칙에 따르면 리듀서는 undefined 반환하지 않아야 하므로 현재 redux 문서에 있는 것처럼 이 두 규칙이 일치하지 않습니다. 그리고 구현과 일치하지 않습니다.

@JoseFMP : 앞서 말했듯이 문제를 구체적으로 설명하는 CodeSandbox를 제공할 수 있고 예상되는 일과 실제로 일어나고 있는 일을 정확히 지적하는 주석을 제공할 수 있다면 살펴볼 수 있습니다. (또한 일관성이 없다고 느끼는 문서 섹션을 지적해 주세요.) 그때까지는 Redux가 내부적으로 어떻게 작동하는지에 대한 오해에 불과합니다.

@markerikson 감사합니다.
문서 정보:

따라서 리듀서가 알려지지 않은 액션으로 호출되면 리듀서는 이 리듀서에서 액션이 무엇을 해야 하는지 알지 못하기 때문에 동일한 상태를 반환해야 합니다.

스토어를 생성할 때 Redux는 알 수 없는 작업과 이전 상태 undefined 를 보내 리듀서를 확인합니다. 따라서 이전 상태가 undefined 이면 리듀서는 문서에 따라 undefined 반환해야 합니다(리듀서는 작업을 모르기 때문에). 그러나 감속기가 undefined 반환하면 Redux 앱이 작동하지 않을 것임을 보장합니다.

예제 코드의 경우:

import { createStore } from 'redux';

const configReducer = (config: any, action: any): any =>{
        return config;
}

const customReducer = (customData: any, action: any): any =>  {
        return customData;
}

const reducers = (currentState: IAppState, action: any): IAppState => {

    var appStateToEvaluate: any;
    if (currentState) { //needs to add this to pass the `undefined` check of redux
        appStateToEvaluate = currentState;
    }
    else{
        //why redux is doing this ?!
        appStateToEvaluate = {}
    }
    const newState: IAppState = {
        cvConfig: configReducer(appStateToEvaluate.config, action),
        personalData: customReducer(appStateToEvaluate.customData, action)
    }

    return newState;
}

const defaultConfig = "cool config";
const data = "yieaah some data";

var initialState = {config: defaultConfig, customData: data};
const store = createStore(reducers, initialState) // at this point redux calls all the reducers with 'undefined' state. Why?

@JoseFMP : 여기서 놓치고 있는 주요 차이점은 해당 예에서 리듀서 함수가 ES6 기본 인수 구문을 사용하여 state 가 undefined 인 경우를 _이미_ 처리했다는 것입니다.

function todoApp(state = initialState, action) {

따라서 튜토리얼의 조언은 정확합니다. 리듀서는 _정의되지 않은 경우가 이미 처리되었다고 가정하고_ 항상 기존 상태를 반환해야 합니다.

@markerikson
답변 주셔서 감사합니다.
그것은 나에게 분명합니다. 튜토리얼에서 누락되었습니다. 튜토리얼에서는 반환할 케이스가 리듀서에서 기본 매개변수 값으로 지정된 케이스라고 말하지 않습니다. 따라서 기울임꼴로 만든 문장이 맞습니다. 그게 그거야. 내 관심사는 튜토리얼에서 누락되었다는 것입니다. 또는 내가 찾지 못했거나 모호합니다.

이제 튜토리얼 및/또는 문서와 별개로 이 undefined 검사가 초기 상태가 지정된 특정 경우에 대해 개인적으로 의미가 없다는 것을 알았습니다. 초기 상태를 지정하지 않으면 괜찮다고 생각합니다. 이제 이것은 토론이 아니라 내 의견일 뿐입니다. 초기 상태가 지정되면 이 검사를 수행하는 것이 무의미하다고 생각합니다. 그러나 나는 어쨌든 그것과 함께 살 수 있습니다 (그리고해야합니다) ;)

마크 지원해주셔서 감사합니다.

우리는 더 큰 문서 개편(#2590)의 일환으로 일부 문구의 단어를 바꿀 수 있습니다.

즉, Redux의 원래 아이디어 중 하나는 각 "슬라이스 리듀서"가 업데이트와 초기 값 제공을 모두 포함하는 상태 부분을 "소유"할 책임이 있다는 것입니다. 당신은 "글쎄, 나는 createStore 초기 값을 제공하고 있다"라는 측면에 갇힌 것 같지만, 당신은 _그렇지 않더라도_ Redux가 어떻게 행동해야 하는지에 대한 기대를 할인하고 있습니다. 값을 별도로 제공합니다.

아직 링크하지 않은 것이 다소 놀랐지만 문서의 Initializing State 페이지를 읽고 싶을 수도 있습니다.

@markerikson
그래 정확 해. 나는 이미 초기 상태에 대한 문서를 알고 있습니다. 내가 의미하는 바(그리고 내가 믿는 이유는 이 문제가 생성되었고 사람들도 이 방향을 의미했기 때문입니다)은 상점을 생성할 때 "초기 상태"를 제공하고 여전히 "기본 상태"를 정의하는 것이 직관적이지 않다는 것입니다. 슬라이스 리듀서(또는 루트 리듀서). 즉, 매우 자주(반드시 그런 것은 아니지만) 동일하거나 매우 관련이 있기 때문에 두 항목을 정의해야 하는 것은 직관적이지 않습니다. @ElonXun 또는 @Vittly 가 저와 같은 혼란을 예로 들 수 있습니다. 즉, 내 말은 Redux의 API가 아니라 순전히 인간적인 관점에서 이 특정 시나리오에서 Redux의 API를 사용하는 것이 얼마나 직관적인지에 대한 것입니다.

마지막 단락은 redux의 API를 사용할 때 인간의 느낌에 관한 것입니다. 기계 구현 또는 그 이면의 이유는 완전히 정당할 수 있습니다. 그러나 API 소비자로서 혼란스럽습니다.

예를 들어, 저는 개발할 때 애플리케이션에 초기 상태가 있는 경우가 많습니다. 그래서 보통 두 번 입력해야 합니다. 저장소를 만들 때 한 번 연결하고 슬라이스 리듀서에서 기본값으로 배포할 때 한 번 더. 물론 이에 대한 많은 솔루션이 있습니다. 그러나 인간인 나를 혼란스럽게 만드는 원칙은 동일한 것을 두 번 입력해야 한다는 것입니다.

그러나 초기 상태가 설정되고 슬라이스 리듀서 또는 루트 리듀서가 "기본 상태"를 갖도록 강제하지 않는 특별한 경우가 여전히 필수로 만드는 것보다 더 문제가 된다고 생각합니다.

그래서 여기에서 유일한 기여는 그것이 약간 직관에 반하는 느낌이 든다고 언급하는 것입니다. 하지만 그냥.

이전 버전에서 assertReducerShape 를 호출한 combineReducers 기억나지 않습니다. 내 코드에서 undefined 는 내 감속기의 잘못된 상태입니다. 이를 보장하기 위해 CombineReducers가 필요하지 않습니다. "리듀서를 결합"하고 무언가가 변경되면 루트 객체를 다시 생성하는 데 필요합니다. 내가 기대하는 것 이상으로 진행되고 있습니다. IMO, 지금은 너무 독단적입니다.

내가 개발한 핵심 응용 프로그램에서 필요하지 않았기 때문에 나는 CombineReducers를 한동안 사용하지 않았습니다. 하지만 지금은 그 응용 프로그램을 래핑하려고 하고 있으며 CombineReducers가 응용 프로그램을 조각화하는 데 사용하기에 적합하다고 생각했습니다. assertReducerShape 의 동작은 놀랍습니다.

@lukescott : 그 수표는 2015년 9월부터 있었습니다.

https://github.com/reduxjs/redux/commit/a1485f0e30ea0ea5e023a6d0f5947bd56edff7dd

그리고 예, combineReducers() 은 _의도적으로_ 독단적입니다. 이러한 경고를 원하지 않으면 해당 검사 없이 유사한 기능을 작성하는 것이 쉽습니다.

구체적인 예로 는 체크 없이 100줄로 된 Dan의 요지

알겠어. 이전 버전은 초기 상태를 전달하고 각 실행에서 정의되지 않은 항목을 확인했습니다(기억하는 경우). 놀라운 것은 첫 번째 실행에서 초기 상태가 전달되지 않는다는 것입니다. 정의되지 않은 전달은 내 앱의 오류입니다. 내가 말했듯이, 나는 이 프로젝트에 대해 잠시 동안 작업하고 있고 한동안 CombineReducers를 사용하지 않았습니다. 이제 막 다시 사용하기 시작하여 애플리케이션을 래퍼 안에 배치합니다.

관념적이라는 것도 이해합니다. 그러나 그 의견은 "리듀서는 정의되지 않은 값을 반환해서는 안된다"는 것이었습니다. 이것이 제가 준수하는 규칙입니다. "우리는 undefined를 전달할 것이고 당신은 무에서 스스로 상태를 생성해야 합니다"로 변경되었습니다. CombineReducers는 더 이상 "항상 초기 상태가 있음"과 함께 작동하지 않습니다. 이는 불행한 일입니다. 이는 3년 전의 규정을 대폭 변경합니다.

나는 당신이 말하는 행동 변화가 무엇인지 잘 모르겠습니다. 구체적인 예를 들 수 있습니까?

초기화 주 문서 페이지 사이의 상호 작용에 배치합니다 preloadedState 대한 인수 createStore 의 state = initialState 감속기에 대한 처리, 및 combineReducers() . 이는 Dan이 2016년 초에 작성한 Stack Overflow 답변을 기반으로 하며 내가 아는 한 의미 있는 변경 사항은 없습니다.

@markerikson 맞습니다. 나는 2.0까지 되돌아 보았고 항상 그랬던 것 같습니다. 아마도 내 응용 프로그램의 복잡성으로 인해 더 명확해졌습니다.

내가 가진 문제는 내 감속기가 다음과 같이 정의된다는 것입니다.

reducer(state: State, action: Action)

상태가 정의되지 않아야 함을 의미합니다. 즉, 초기 상태가 있어야 합니다. 그러나 CombineReducers는 확인을 위해 reducer(undefined, INIT)를 호출하기 때문에 내 코드에 오류가 발생합니다(성공하면 나중에 reducer(initState, INIT)를 호출 - INIT를 두 번 호출).

이것은 CombineReducers에서 사용되는 모든 감속기를 다음과 같이 정의해야 함을 의미합니다.

reducer(state: State | undefined, action: Action)

따라서 이전에는 그렇게 하지 않았다는 내 주장은 잘못된 것입니다. 그러나 내가 가지고 있는 문제와 OP가 가진 문제는 동일할 가능성이 높습니다. 선택적인 상태로 감속기를 선언해야 합니다. 실제로 경고가 표시되지 않습니다. 정의되지 않은 상태가 예상되기 때문에 코드가 충돌합니다.

이렇게 해야 하고 내가 직접 굴려야 한다고 하면 괜찮습니다. 모양을 주장하는 것 외에도 런타임에 이미 정의되지 않은 것을 확인하기 때문에 불행합니다. 모양을 주장하는 것은 다소 과도하고 비생산적인 것처럼 보입니다.

예. 해당 문서 페이지에 설명된 대로 combineReducers 를 사용할 때 각 슬라이스 리듀서는 고유한 초기 상태를 반환할 책임이 있으며 sliceReducer(undefined, action) 에 대한 응답으로 이를 수행해야 합니다. combineReducers 시점에서 코드가 _is_ 버그가 있습니다. 예상된 계약을 준수하지 않기 때문에 코드가 잘못되었다는 메시지가 표시되기 때문입니다.

실제로 초기 상태를 제공하지 않습니까? 코드는 실제로 어떻게 생겼습니까?

createStore를 통해 초기 상태를 제공하고 있습니다. 그러나 초기 상태를 전달했음에도 불구하고 assertReducerShape가 명시적으로 undefined 내 감속기를 호출하기 때문에 초기 상태가 내 감속기로 전달되지 않습니다.

https://github.com/reduxjs/redux/blob/231f0b32641059caab3f98a3e04d3afaad19a7d1/src/combineReducers.js#L68

내 코드는 버그가 없습니다. undefined가 _절대_ 전달되지 않기만 하면 됩니다. 초기 상태는 필수이며 서버에서 생성됩니다. CombineReducers는 해당 계약을 깨고 필요한 상태로 감속기를 엄격하게 입력하는 것을 불가능하게 만듭니다. CombineReducers 없이 이 작업을 수행할 수 있으며 잘 작동합니다. 그것이 내가해야 할 일이라고 생각합니다. 그러나 IMO는 선택적 상태를 강제하는 것은 바람직하지 않으며 제 경우에는 엄격하게 형식화된 응용 프로그램을 중단하기 때문에 CombineReducers를 쓸모 없게 만듭니다.

내가 이해하지 못하는 것은 assertReducerShape가 필요한 이유입니다. 런타임 시 여기에서 이미 undefined 를 확인합니다.

https://github.com/reduxjs/redux/blob/231f0b32641059caab3f98a3e04d3afaad19a7d1/src/combineReducers.js#L169

assertReducerShape는 일종의 중복된 것 같습니다. 그러나 제 경우에는 유형 보장이 중단됩니다... 이것이 주장하려는 것은 무엇입니까?

그렇다면 이것은 실제로 TypeScript 상호 작용 문제입니까?

솔직히 말하자면 이는 결국 접근 방식의 차이인 것 같습니다.

combineReducers() 은 JS로 작성되었으며 런타임 검사를 하려고 합니다.

TS에서 정적 검사를 하려고 하는데 작성한 선언이 combineReducers() 실제 작동 방식과 일치하지 않습니다. 그런 의미에서 슬라이스 리듀서의 유형 선언은 올바르지 않습니다. 왜냐하면 combineReducers() 와 함께 사용될 때 undefined 가 _can_ 및 _will_ 호출되기 때문입니다.

호출한 특정 라인은 슬라이스 리듀서의 반환 값이 (아마도 의미 있는) 기존 상태 슬라이스 값으로 호출될 때 undefined 가 아닌지 확인하는 반면 assertReducerShape() 는 다음을 확인합니다. 반환하지 않습니다 undefined 의 초기 상태 값이 주어 졌을 때 undefined , 즉 알 수없는 작업 유형 (호출 있음을 경우에도 (즉, 즉, 감속기의 상태를 자기 - 초기화) 및 감속기 기본적으로 항상 기존 상태를 반환합니다.

정의되지 않은 경우 교체하십시오 ... 제 경우에는 어떤 이유로 든 내 서버가 데이터없이 응답 할 때 활성 세션이 없기 때문에 그 문제가 발생했기 때문에 감속기에서이 작업을 수행하면 다음과 같이 작동합니다. 나를 위한 매력:

export default function itemReducer(state = initialState.items | undefined, action){ 
    switch(action.type) 
   { 
         case "LOAD_ITEMS_SUCCESS":
               if(action.items==undefined) { 
                        action.items=[]; 
               }
                return action.items

리듀서가 정의되지 않은 경우 빈 배열을 undefined로 바꾸면 더 이상 해당 오류가 발생하지 않습니다.

건배!