Redux: mapStateToProps（）が呼び出されていない

http://redux.js.org/docs/Troubleshooting.htmlに目を通し、ケースが説明されている問題の1つではないことを確認しましたか？

ストアは、アプリケーションの状態に関するデータを保持するプロパティを持つオブジェクトであると思います。 これらのトップレベルのプロパティは、アプリケーションの一部に関する情報を保持するためのサブツリーを提供するオブジェクトにすることができます。 これは本当ですか？

うん。 Storeは、最上位の状態オブジェクトを内部的に保持します。 store.getState()からそのオブジェクトへのアクセスを提供します。 そのオブジェクトは、ルートレデューサーから返されるものすべてに対応し、多くの場合、ツリーのようなものです。

アクションがストアにディスパッチされると、どのプロパティ（またはストアのサブツリー）が更新されますか？ ストア内のプロパティの自動作成/関連付けがあるようですが、それはどのように決定されますか？

いいえ、自動作成はありません。 ストアは、ルートレデューサーを呼び出した結果をポイントし始めます。

ルートレデューサーが自分で作成した関数である場合、その結果は、アクションをディスパッチした後に得られるものです。

function counter(state = 0, action) {
  if (action.type === 'INCREMENT') {
    return state + 1; // will become the next value of store.getState() after store.dispatch()
  }
  return state;
}

combineReducers({ foo, bar })ようなものでルートレデューサーを_生成_する場合、次のように手動でルートレデューサーを作成した場合と同じです。

function root(state = {}, action) {
  return {
    foo: foo(state.foo, action),
    bar: bar(state.bar, action)
  }
}

これは、州のプロパティがしばしば由来するところです。 それらの値は、アクションの処理中にそれぞれfooおよびbarレデューサーが返すものによって決定されるため、これらを完全に制御できます。

mapStateToPropsは、ストアの適切なプロパティ/部分の更新をリッスンすることをどのように「認識」しますか？ 何がそれらを結びつけますか？

mapStateToPropsをconnect()関数に渡します。 store.subscribe()を使用して、ストアへのすべての変更をリッスンするコンポーネントを生成します。 ストアが変更されると、生成されたコンポーネントはstore.getState()を読み取り、それをmapStateToProps()に渡して、次に渡される小道具を決定します。 それらが変更された場合、コンポーネントがそれらとともに再レンダリングされます。

どうすればこれをデバッグできますか？ アクションのディスパッチがmapStateToPropsを起動しないように見える理由を理解するには、何をする必要がありますか？

https://github.com/theaqua/redux-loggerのようなミドルウェアを追加しmapStateToPropsが呼び出されない場合は、

• アクションをdispatch()するのを忘れて、アクションクリエーターと呼んだだけです。
• または、レデューサーが参照的に同一の値を返したため、 connect()はわざわざmapStateToProps()呼び出さなかった。

これらのケースは両方ともhttp://redux.js.org/docs/Troubleshooting.htmlで説明されてい

将来的には、最初にStackOverflowで質問し、ライブラリにバグがあり、共有できる例で一貫して再現できると確信できる場合は、課題追跡システムを使用するようにしてください。

ありがとう！

順番に答える：

• Reduxは通常、状態ツリーの最上位部分がプレーンなJavascriptオブジェクトであると想定します（ただし、Immutable.jsライブラリによって提供されるデータ型を使用することも一般的です）。 そのオブジェクトの中に何を入れるか、そしてコンテンツをどのように構成するかは完全にあなた次第です。 最も一般的なアプローチは、ドメインごとに物事を整理することです。 たとえば、架空のブログアプリの状態ツリーは次のようになります： { users : {}, posts : {}, comments : {}, ui : {} } 。 http://redux.js.org/docs/FAQ.html#reducers-share-stateおよびhttp://redux.js.org/docs/FAQ.html#organizing-state-nested-dataを参照してください。
• 技術的に言えば、ストアを作成するときは、_single_「reducer」関数を定義します。 その関数は、現在の状態と着信アクションで呼び出され、不変の方法で行われる_all_適切な更新で新しい状態オブジェクトを返す責任があります（つまり、直接のインプレース編集はありません-更新する必要があるすべてのものはコピーを作成し、それらを変更し、代わりにコピーを返すことによって実行され、ネストされたフィールドを更新することは、そのすべての祖先もコピーして更新することを意味します。 ただし、更新ロジックの最後のすべてのビットを1つの巨大な関数に入れることは悪い考えであるため、その更新ロジックはほとんどの場合、より小さな再利用可能なサブリデューサー関数に分割されます。 そのロジックをどのように構成するかはあなた次第ですが、自動的に更新されるものはありません。それを行うのはレデューサーロジック次第です。 Reduxに付属しているcombineReducersユーティリティを使用すると、次のような特定のデータスライスの更新を管理する特定のレデューサー関数を簡単に作成できます。 const combinedReducer = combineReducers({users : userReducer, posts : postReducer, comments : commentsReducer, ui : uiReducer});
• Reduxは、ストアで_any_アクションが実行されるたびに、すべてのサブスクライバーに通知するだけです。 React Redux connect()関数はサブスクライブし、コンポーネントのmapStateToPropsを呼び出して、抽出されたデータのいずれかが前回から変更されているかどうかを確認します。 特定のネストされた状態のサブスクリプションはありません。 http://redux.js.org/docs/FAQ.html#store-setup-subscriptionsを参照してください。
• コンポーネントが更新されない最大の原因は、レデューサーの状態が直接変化することです。 http://redux.js.org/docs/FAQ.html#react-not-rerenderingを参照してください。 それ以外にも、アクションのデバッグとログ記録に使用できるアドオンがいくつかあります。 https://github.com/markerikson/redux-ecosystem-links/blob/master/devtools.mdにそれらの束がリストされてい

うまくいけば、それは物事を片付けるのに役立ちます。

それを超えて、ダンが言ったように：使用法の質問は一般的にスタックオーバーフローに適しています。 また、DiscordのReactifluxコミュニティには、Reduxを含むReact関連のテクノロジー専用のチャットチャネルがたくさんあり、質問に答える人が常にたくさんいます。 https://www.reactiflux.comに招待リンクがあり

@ richb-hanoverおそらく、react-redux接続によって実行される浅い比較を目撃したことでしょう。 つまり、他のオブジェクト内にネストされたオブジェクトは、ルートキーのみが変更をチェックされるため、変更されても再レンダリングされません。

http://redux.js.org/docs/faq/ReactRedux.html#why -isnt-my-component-re-rendering-or-my-mapstatetoprops-running

@ richb-ハノーバーは、私の場合、@gaearonは、問題を検出しました。

または、レデューサーが参照的に同一の値を返したため、connect（）はmapStateToProps（）をわざわざ呼び出さなかった。

私はこの修正を使用

const mapStateToProps = (state, props) => {
    return { id: props.id, currentState: state[props.id] };
}

const mapDispatchToProps = (dispatch) => {
    return {
        increment: (id) => {
            dispatch({ type: 'INCREMENT', id: id })
        }
    }
}

const DumbListItem = ({
    increment,
    id,
    currentState
}) => (
        <div>
            <li onClick={() => increment()}>{id}</li>
            <span>{currentState}</span>
        </div>
    );

export const ConnectedListItem = connect(
    mapStateToProps,
    mapDispatchToProps
)(DumbListItem);

idパラメーターをインクリメント呼び出しに渡さなかったため（テンプレートのincrement(id)として、またはmapDispatchToPropsの2番目のパラメーターを介して）、ストアは渡しませんでした。正しく更新するので、おそらくそれがあなたの問題であるかどうかを確認してください。