Reactjs 在Redux中修改两个还原器中的一个状态属性

在我的状态下，我的Redux有一个小问题，我需要能够在两个减缩器中修改我的计数器属性，因为它的值更新到两个减缩器（递增、递减）。对不起，我是Redux新手，尝试理解这个概念

计数器组件

减量减速机

Index.js

const reducer=组合减速机({
递增，
减量器
});
const store=createStore（reducer）；
ReactDOM.render（，document.getElementById（'root'））；

您只是从错误的角度接近它，您不应该在两个减速机中修改相同的变量，而是希望有一个单一的

减速机来处理修改计数器的所有操作：

const initialState = {
    counter: 0,
};

const reducer = (state = initialState, action) => {
    switch(action.type) {
        case actionType.INCREMENT:
            return {
                ...state,
                counter: state.counter + 1
            };
            break;
        case actionType.DECREMENT:
            return {
                ...state,
                counter: state.counter - 1
            }
            break;
        default:
            return state;
    }
}

export default reducer;

将代码拆分为多个简化程序是保持代码有序的一种方法，但是您永远不会有两个简化程序可以分别修改相同的内容。相反，每个减速器应处理整体状态的某个“部分”，例如：

const totalState = {
    activeUser: { /* username, email, phone, etc */ },
    friends: [],
    subscriptions: [],
    history: [],
    // etc.
}

然后，您可能会有一个
activeUserReducer
、
friendsReducer
、
SubscribptonSreducer
、
historyReducer
，等等。每个人都会处理该部分状态，但永远不会进入另一个Reducer状态

如果需要通过单个操作修改两个不同的属性，只需执行以下操作：

const mapDispatchToProps = dispatch => {
    return {
        increment: () => {
            dispatch(counterAction('INCREMENT'));
            dispatch(someOtherAction());
        }
    };
};

我知道我可以这样做，但我认为在更大的应用程序中可能会发生同样的情况，我必须修改相同的属性，因此我将其分配给两个还原器，以掌握如何以示例方式进行操作。您永远不必在两个不同的还原器中修改相同的属性-一个还原器必须“拥有”你不应该在多个减速机上复制相同的值。存储值应仅位于一个位置，即在一个减速器中定义并由一个减速器修改。
const reducer = combineReducers({
    incReducer,
    decReducer
});

const store = createStore(reducer);

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

const initialState = {
    counter: 0,
};

const reducer = (state = initialState, action) => {
    switch(action.type) {
        case actionType.INCREMENT:
            return {
                ...state,
                counter: state.counter + 1
            };
            break;
        case actionType.DECREMENT:
            return {
                ...state,
                counter: state.counter - 1
            }
            break;
        default:
            return state;
    }
}

export default reducer;

const totalState = {
    activeUser: { /* username, email, phone, etc */ },
    friends: [],
    subscriptions: [],
    history: [],
    // etc.
}

const mapDispatchToProps = dispatch => {
    return {
        increment: () => {
            dispatch(counterAction('INCREMENT'));
            dispatch(someOtherAction());
        }
    };
};