在 react-redux 中从父组件更新子组件的状态

卡维杜·阿洛卡·科迪卡拉

我正在开发一个简单的计数器来react-redux在 React Native 中学习。

export default class Counter extends Component {

  state = {
     count: 0
  }

  reducer = (state = this.state, action) => {
     // code
  }

  store = createStore(this.reducer);

  render() {
     return (
        <View style={[Styles.container, { justifyContent: 'center' }]}>
           <Provider store={this.store}>
              <Controller />
           </Provider>
        </View>
     );
  }
}

在Controller有2个按钮来改变count在父组件和节目的值count也是如此。这工作正常。我可以增加或减少子组件 ( Controller) 的值，子组件的值也会改变。

但是，

假设我在父组件 ( Counter) 中添加了以下代码。

state = {
   count: 0
}

componentDidMount () {
   setTimeout(() => this.setState({ count: 10 }), 5000);
}

在这种情况下，一旦Counter5 秒后父组件 ( ) 中的状态值发生变化，它不会将子组件 ( Controller) 中的值更新为 10 。它仍然显示 0。无论如何我可以从父组件更新子组件中的值吗？

卡维杜·阿洛卡·科迪卡拉

我只是通过制作一个返回createStore.

redux/store.js

import { createStore } from 'redux';

export default function getStore(reducer) {
   return createStore(reducer);
}

计数器.js

import store from './redux/store'

export default class Counter extends Component {

    state = {
        count: 0
    }

    reducer = (state = this.state, action) => {
        switch (action.type) {
            case actionTypes.INCREASE:
                return { count: ++state.count };

            case actionTypes.DECREASE:
                return { count: --state.count };

            default:
                return state;
        }
    }

    componentDidMount() {
        setTimeout(() => this.setState({ count: 100 }), 2000);
    }

    render() {
        return (
            <View style={[Styles.container, { justifyContent: 'center' }]}>
                <Provider store={store(this.reducer)}>
                    <Controller />
                </Provider>
            </View>
        );
    }
}

而这正是我想要的。现在我可以更新子组件和父组件的值。子组件中的值在两种方式下都发生了完美的变化。但如果有人有其他解决方案，欢迎您在此处发布。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。