web-dev-qa-db-ja.com

コンポーネントがアンマウントするときにreduxストアからサブスクライブを解除する方法は？ redux connectを装飾する方法は？

次の小道具（storeName）をコンポーネントに渡します。

<MyComponent reducerName="city" />

動的な名前（this.props.reducerName）でストアに接続したい

例えば

export default connect(state => ({
    some: state[this.props.reducerName]
}), { })(MyComponent);

Redux connectを装飾する方法、または私がしなければならないことは？

Redux connectをスキップして、store.subscribeを使用しました

componentDidMount() {
    store.subscribe(() => {
        this.setState({some: store.getState([this.props.reducerName]});
    });
}

しかし、別のページに移動すると、次のエラーが表示されます。

警告：setState（...）：マウントされたコンポーネントまたはマウントされたコンポーネントのみを更新できます。これは通常、マウントされていないコンポーネントでsetState（）を呼び出したことを意味します。これはノーオペレーションです。

コンポーネントがアンマウントするときにreduxストアからサブスクライブを解除する方法は？

javascriptreactjsecmascript-6reduxreact-redux
12
Nemo Free

connectには、2番目のパラメーターownPropsがあります。これは、渡されたすべての小道具を含むオブジェクトです。あなたはこのようなことをするでしょう：

const mapStateToProps = (state, { reducerName = 'defaultReducer' }) => ({
  some: state[reducerName],
});

export default connect(mapStateToProps)(MyComponent);
4
corvid

退会するには、store.subscribeによって関数returnを実行するだけです。

componentDidMount() {
  this.unsubscribe = store.subscribe(() => {
    // ...
  });
}
componentWillUnmount() {
  this.unsubscribe();
}
49
kkkkkkk