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

【问题标题】：Update child component's state from the parent component in react-redux从 react-redux 中的父组件更新子组件的状态
【发布时间】：2021-04-02 05:19:27
【问题描述】：

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

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);
}

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

【问题讨论】：

标签： react-native redux react-redux state

【解决方案1】：

我刚刚自己做了一个解决方案，创建了一个返回createStore的全局函数。

redux/store.js

import { createStore } from 'redux';

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

Counter.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>
        );
    }
}

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

【讨论】：