Redux: createStoreでinitialStateを指定すると、combineReducersは、初期化中に未定義で返されたレデューサーの1つを表示します

これはバグトラッカーであり、サポートシステムではありません。 使用法に関する質問については、StackOverflowまたは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の2番目の引数です。 問題があると思います。 CombineReducersがinitialStateとcreateStateのレデューサーをチェックしない理由を説明できますか？

@Vittly ： combineReducersは意図的に意見が述べられていますが、 createStoreはそうではありません。 createStoreは、指定したルートレデューサー関数を呼び出すだけで、結果を保存します。 combineReducersは、それを使用している場合、状態をどのように編成し、結合されたレデューサーがどのように動作するかについて、特定の一連の仮定に同意していることを前提としています。

＃191と＃1189を読み通してください。これらは、 combineReducersが意見を述べられている理由と、それがどのような意見を持っているかについての歴史と詳細を説明しています。

したがって、問題は（まもなく）「レデューサーを組み合わせると、ストアツリーも分割され、何かを見逃したり、createStore 2nd argのストアの一部のみを意図的にプリロードしたりする可能性があります。ストアツリーの一貫性を高めるには、assertReducerShapeを使用してください」。 さて、refsをありがとう

ここでも同じ問題があります。
したがって、 createStoreを使用して、初期状態を渡します。 しかし、 reduct.jsファイルでは、関数assertReducerShape reduxは、 undefined状態を渡すときにレデューサーをチェックします。

私見これはバグです。

@JoseFMP ：私はあなたが見ているものがバグではないことを効果的に保証します。 ただし、問題を示すリポジトリまたはCodeSandboxをまとめることができれば、調査することができます。

もちろん。 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で呼び出されると、適切なデフォルト値が返されます。 これを確認するために、 combineReducers()は実際に(undefined, {type : "SOME_RANDOMIZED_ACTION_TYPE"})を使用してレデューサーを呼び出し、未定義の値または「実際の」値を返すかどうかを確認します。

現在、レデューサーは渡されたものを返す以外は何もしません。つまり、 stateが未定義の場合、それらは_return_undefinedになります。 つまり、 combineReducers()は、期待どおりの結果が得られていないことを示しています。

宣言をconfigReducer = (config = {}, action)などに変更するだけで、警告が修正されます。

繰り返しますが、明確にするために、これはバグではありません。 これは動作検証です。

Hej @ markeriksonご
いくつかのコメント：

1）いいえ、 combineReducers固有のものではありません。 combineReducersを使用せず、独自のルートレデューサーを実装した場合も、同じことが起こります。

2）ここでの矛盾は、Reduxのドキュメントで、レデューサーが不明または予期しないステータスで呼び出された場合、ステータスを変更して引数として来た値を返すべきではないと述べられていることです。 つまり... undefinedを受け取った場合は、 undefined返す必要があります。 しかし、別のルールでは、レデューサーはundefined返さないようにする必要があるため、現在reduxのドキュメントにあるこれら2つのルールには一貫性がありません。 そして、実装と矛盾しています。

@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の場合を_already_処理していることです。

function todoApp(state = initialState, action) {

したがって、チュートリアルのアドバイスは正しいです。レデューサーは、未定義のケースがすでに処理されていると仮定して、常に既存の状態を返す必要があります。

@markerikson
ご回答ありがとうございます。
それは私には明らかです。 チュートリアルにありません。 チュートリアルでは、返されるケースがレデューサーのデフォルトのパラメーター値として指定されているケースであるとは述べていません。 したがって、斜体にした文は正しいです。 それはそれ。 私の懸念は、それがチュートリアルに欠けていることです。 または、見つからなかったか、あいまいです。

さて、チュートリアルやドキュメントとは関係なく、このundefinedチェックは、初期状態が指定されている特定のケースでは個人的に意味がないことがわかりました。 初期状態が指定されていない場合は問題ありません。 さて、これは議論ではなく、私の意見です。初期状態が指定されている場合、このチェックを行うのは無意味だと思います。 しかし、私はとにかくそれと一緒に暮らすことができます（そしてそうしなければなりません）;）

マークさん、ありがとうございました。

確かに、より大きなドキュメントの刷新（＃2590）の一環として、言い回しの一部を言い換えることができます。

とは言うものの、Reduxの背後にある元々のアイデアの1つは、各「スライスレデューサー」が状態の一部を「所有」する責任があるというものでした。これには、更新と初期値の提供の両方が含まれます。 あなたは「まあ、私はcreateStore初期値を提供している」という側面に固執しているようですが、Reduxが_そうでない_場合でも、Reduxがどのように動作するかについての期待を軽視しています。値を個別に提供します。

これをまだリンクしていないことに少し驚いていますが、ドキュメントの「初期化状態」ページを読みたいと思うかもしれません。

@markerikson
はい。それで合っています。 私はすでに初期状態に関するドキュメントを知っています。 私が言いたいのは（そして私はこの問題が作成された理由であり、人々もこの方向を意味していると信じています）、ストアを作成するときに「初期状態」を提供し、それでも「デフォルト状態」を定義するのは直感に反するということですスライスレデューサー（またはルートレデューサー）。 つまり、必ずしもそうとは限りませんが、同じであるか、非常に関連していることが非常に多いため、2回定義する必要があるのは直感に反します。 例として、私と同じように混乱した@ElonXunまたは@Vittlyの投稿を参照してください。 つまり、私の発言はReduxのAPIではなく、純粋に人間の観点から、この特定のシナリオでReduxのAPIを使用することがどれほど直感的であるかについてです。

最後の段落は、reduxのAPIを使用するときの人間の感覚に関するものであることに注意してください。 機械の実装またはその背後にある理由は完全に合法である可能性があります。 しかし、APIコンシューマーとしては、混乱を招きます。

たとえば、私にとって、開発中は、アプリケーションに初期状態が頻繁にあります。 したがって、通常は2回入力する必要があります。 1回はストアを作成するときにプラグを差し込んで、もう1回はスライスレデューサーのデフォルト値として配布します。 もちろん、そのための多くのソリューション。 しかし、人間としての私にとって混乱を招くという原則は、同じものを2回入力する必要があるということです。

ただし、初期状態が設定され、スライスレデューサーまたはルートレデューサーが「デフォルト状態」になることを強制しないという特殊なケースがあると、それを必須にするよりも厄介なことがあると思います。

したがって、ここでの唯一の貢献は、それが少し直感に反していると感じることを言及することです。 しかし、それだけです。

以前のバージョンでcombineReducersがassertReducerShapeを呼び出したことを思い出せません。 私のコードでは、 undefinedは私のレデューサーの無効な状態です。 これを確実にするためにcombineReducersは必要ありません。「レデューサーを結合」して、何かが変更された場合にルートオブジェクトを再作成する必要があります。 それは私が期待することを少し超えています。 IMO、今はあまりにも意見が分かれています。

確かに、私が開発しているコアアプリケーションでは必要がなかったため、しばらくの間、combineReducersを使用していません。 しかし、私は現在そのアプリケーションをラップしようとしています。combineReducersを使用してアプリケーションをスライスするのは問題ないと考えました。 assertReducerShapeは驚くべきものです。

@lukescott ：その小切手は2015年9月からあります：

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

そして、はい、 combineReducers()は_意図的に_意見があります。 これらの警告が必要ない場合は、これらのチェックなしで独自の同様の関数を作成するのは簡単です。

具体的な例として、チェックなしの100行のDanの要点

わかった。 古いバージョンは初期状態を通過し、実行ごとに未定義がないかチェックしました（思い出すと）。 驚くべきことは、最初の実行で初期状態が渡されないことです。 undefinedを渡すことは、私のアプリのエラーです。 私が言ったように、私はこのプロジェクトにしばらく取り組んでいて、しばらくの間、combineReducersを使用していません。 アプリケーションをラッパー内に配置して、使用を再開しました。

私もそれが意見を持っていると思います。 しかし、その意見は「レデューサーは未定義を返してはならない」というものでした。これが私が従うルールです。 「未定義を渡すので、何もないところから自分で状態を作成する必要があります」に変更されました。 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を2回呼び出します）。

つまり、combineReducersで使用されるレデューサーは、次のように定義する必要があります。

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

したがって、以前はそれを行わなかったという私の主張は正しくありません。 しかし、私が抱えている問題とOPが抱えている問題は、おそらく同じです。それは、オプションの状態でレデューサーを宣言することを強制します。 実際には警告は表示されません。未定義の状態が予想されるため、コードがクラッシュします。

あなたがそれがこのようでなければならないとあなたが言うなら、私はそれを自分で転がす必要があります、それは大丈夫です。 シェイプをアサートすることに加えて、実行時に未定義をすでにチェックしているため、残念です。 形を主張することは少しやり過ぎで逆効果のようです。

はい。 そのドキュメントページで説明されているように、 combineReducersを使用する場合、具体的には、各スライスレデューサーが独自の初期状態を返す責任があり、 sliceReducer(undefined, action)に応答してそれを行う必要があります。 combineReducersの時点から、コードは期待される契約に準拠していないため、バグがあり、コードが間違っていることがわかります。

実際に初期状態を提供していませんか？ コードは実際にはどのように見えますか？

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()とともに使用すると、_can_および_will_がundefinedで呼び出されるためです。

あなたが呼び出さきた具体的なラインは、あなたのスライス減速の戻り値がないことを確認して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を空の配列に置き換えてください。そうすれば、そのエラーは発生しなくなります。

乾杯！