[解決済み] Reduxでストアの単一のプロパティ変更にサブスクライブする

質問

Reduxでは、ストアの変更を簡単に購読することができます。

store.subscribe(() => my handler goes here)

しかし、ストアがさまざまなオブジェクトでいっぱいで、アプリの特定の場所で、ストア内の特定のオブジェクトに加えられた変更のみを購読したい場合はどうしたらよいでしょうか。

どのように解決するのでしょうか？

を使用している場合、ストアの一部を購読する方法はありません。 subscribe を直接利用することはできませんが、Redux の作者が自ら言うように - を使用しないでください。 subscribe を直接使わないでください! Reduxアプリのデータフローを実際に機能させるには、アプリ全体を包む1つのコンポーネントが必要です。このコンポーネントはストアに登録します。残りのコンポーネントはこのラッパーコンポーネントの子コンポーネントとなり、必要な部分のみステートを取得します。

もしあなたがReactでReduxを使っているなら、良い知らせがあります。 react-redux パッケージがこの問題を解決してくれます。というラッパーコンポーネントを提供しています。 <Provider /> . そして、少なくとも1つのスマート・コンポーネントを作成します。 Provider によって渡される状態の変更をリッスンします。このコンポーネントが聞くべき状態の部分を指定することができ、状態のこれらの部分はそのコンポーネントに小道具として渡されます（そしてもちろん、そのコンポーネントは自分の子にもそれを渡すことができます）。これを指定するには connect() 関数を使用し、コンポーネントで mapStateToProps 関数を最初のパラメータとして使用します。おさらいすると

ルートコンポーネントを Provider ストアの変更を購読するコンポーネント

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)

これで <App /> でラップされている connect() でラップされたものは、quot;smart" コンポーネントになります。を渡すことができます。 mapStateToProps を渡すことで、状態の特定の部分を選び、それを小道具として与えることができます。

const mapStateToProps = (state) => {
    return {
        somethingFromStore: state.somethingFromStore
    }
}

class ChildOfApp extends Component {
    render() {
        return <div>{this.props.somethingFromStore}</div>
    }
}

//wrap App in connect and pass in mapStateToProps
export default connect(mapStateToProps)(ChildOfApp)

明らかに <App /> は多くの子要素を持つことができ、そのうちのどの部分を mapStateToProps はその子ごとにどの部分をリッスンすべきかを選ぶことができます。のドキュメントを読むことをお勧めします。 の使用法に関するドキュメントを読むことをお勧めします。 を読んで、このフローをよりよく理解することをお勧めします。