Question

我在一个页面中有四个有状态的反应组件，只需单击一个按钮就可以同时更新它们。

我现在想使用redux store来保存所有组件的状态。

我为第一个组件写了react-redux connect，它运行正常。

然后对第二个组件采用相同的逻辑，但商店没有与第一个组件一起更新。

如何同时保存所有组件的状态以进行存储？

Answer 1

我认为你可以使用这种结构。

您使用四个有状态组件的主页应该如下所示。

class App extends React.Component {
    render() {
        const { commonState, updateCommonStateHandler } = this.props;
        return (
            <div>
                <Component1 commonState={commonState} updateCommonStateHandler={updateCommonStateHandler} />
                <Component2 commonState={commonState} updateCommonStateHandler={updateCommonStateHandler} />
                <Component3 commonState={commonState} updateCommonStateHandler={updateCommonStateHandler} />
                <Component4 commonState={commonState} updateCommonStateHandler={updateCommonStateHandler} />
            </div>
        );
    }
}

const mapStateToProps = state => {
    return {
        commonState: state.commonState
    };
};

const mapDispatchToProps = dispatch => {
    return {
        updateCommonStateHandler: change => {
            dispatch(() => ({
                type: 'UPDATE_COMMON_STATE',
                change
            }));
        }
    };
};

export default connect(mapStateToProps, mapDispatchToProps)(App);

使用减速器

const updateCommonStateReducer = (state = {}, action) => {
    const newState = extend({}, state);
    if(action.type === 'UPDATE_COMMON_STATE') {
        newState.commonState = newState.commonState || {};
        extend(newState.commonState, action.change || {});
    }
    return newState;
};

因此，如果您想要更新任何子组件的状态，您应该调用updateCommonStateHandler，它将调度一个动作来更新状态。

在状态更新时，react将使用新的commonState重新呈现所有组件。

PS：这只是一个解释情况的示例代码，而不是解决方案用ES6编写

如何通过单击一个按钮同时更新许多组件的redux存储？

1 个答案: