84

Reduxでは、変更を保存するために簡単にサブスクライブできます

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

しかし、ストアがさまざまなオブジェクトでいっぱいで、アプリ内の特定の場所で、ストア内の特定のオブジェクトでのみ行われた変更をサブスクライブしたい場合はどうすればよいでしょうか?

4

4 に答える 4

131

直接使用する場合、ストアの一部をサブスクライブする方法はありませんがsubscribe、Redux の作成者自身が言うように、直接使用しないでくださいsubscribe。Redux アプリのデータ フローが実際に機能するためには、アプリ全体をラップする 1 つのコンポーネントが必要になります。このコンポーネントはストアをサブスクライブします。コンポーネントの残りの部分は、このラッパー コンポーネントの子となり、必要な状態の部分のみを取得します。

React で Redux を使用している場合は、良いニュースがあります。公式のreact-reduxパッケージがこれを処理してくれます。と呼ばれるラッパー コンポーネントを提供します<Provider />。Providerこれで、ストアから渡された状態の変化をリッスンする「スマート コンポーネント」が少なくとも 1 つ作成されます。状態のどの部分をリッスンするかを指定できます。状態のそれらの部分は、そのコンポーネントに小道具として渡されます (そして、もちろん、それらを独自の子に渡すことができます)。「スマート」コンポーネントでconnect()mapStateToProps関数を使用し、その関数を最初のパラメーターとして使用することで、それを指定できます。要点をまとめると：

Provider変更を保存するためにサブスクライブするコンポーネントでルート コンポーネントをラップする

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

<App />これで、ラップされたその子はconnect()「スマート」コンポーネントになります。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 />があるかを選択できます。このフローをよりよく理解するために、ReactmapStateToPropsの使用に関するドキュメントを読むことをお勧めします。

于 2016-03-25T04:32:42.780 に答える
25

Redux は、ストアがいつ更新されたかを知るための一般的な方法を 1 つだけ提供します:subscribeメソッドです。API は意図的に低レベルであり、引数なしで各コールバックを実行するだけなのでsubscribe、何が変更された可能性があるかについての情報を取得しないコールバック。subscribeあなたが知っているのは、ストアが何らかの形で更新されたことだけです.

そのため、誰かが特定のロジックを記述して、古い状態と新しい状態を比較し、何かが変更されたかどうかを確認する必要があります。React-Redux を使用し、コンポーネントのmapStateToProps関数を指定し、コンポーネントに実装componentWillReceivePropsし、ストアの特定の props が変更されたかどうかを確認することで、これを処理できます。

このケースを処理しようとするいくつかのアドオン ライブラリもあります: https://github.com/ashaffer/redux-subscribeおよびhttps://github.com/jprichardson/redux-watch。どちらも基本的に、異なるアプローチを使用して、状態の特定の部分を指定できます。

于 2016-03-25T05:17:50.107 に答える