时间戳

首页 > 解决方案 > 在 Redux 中修改两个 Reducer 中的一个 state 属性

reactjs - 在 Redux 中修改两个 Reducer 中的一个 state 属性

问题描述

我在我的状态下对 Redux 有一个小问题我需要能够在两个 Reducer 中修改我的 counter 属性，因为它对两个 reducer 的值更新（增量，减量）对不起，我是 Redux 的新手，并尝试理解这个概念。

计数器组件


        return(
            <>
                <div className="flex justify-center">
                    <div className='font-bold text-4xl text-blue-600 bg-gray-300 p-6 m-3 rounded-full'>The Result :
                        {this.props.counter}
                    </div>
                </div>
                <section className='flex p-5 m-3 justify-center'>
                    <button onClick={this.props.increment} className={`bg-green-400 ${btnDefault}`} >Increment</button>
                    <button onClick={() => this.props.decrement(this.props.counter)} className={`bg-red-400 ${btnDefault}`}>Decrement</button>
                </section>
            </>
        )
    }
}


const mapStateToProps = state => {
    return {
        counter: state.incReducer.counter,
    }
};
const mapDispatchToProps = dispatch => {
    return {
        increment: () => dispatch(counterAction('INCREMENT')),
        decrement: (counter) => dispatch(counterAction('DECREMENT',counter))
    }
};

export default connect(mapStateToProps, mapDispatchToProps)(Counter)

增量减速器

const initialState = {
    counter: 0,
};

const reducer = (state = initialState, action) => action.type === actionType.INCREMENT ?
        {
        ...state,
        counter: state.counter + 1
        }
    : state;


export default reducer;

减量器

const initState = {

};

const reducer = (state = initState, action) => action.type === actionType.DECREMENT ?
    {
        ...state,
        counter: action.counter - 1
    }
    : state;

export default reducer;

索引.js

const reducer = combineReducers({
    incReducer,
    decReducer
});

const store = createStore(reducer);

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

标签： reactjsreduxreact-redux

解决方案

你只是从错误的角度接近它，你不应该在两个减速器中修改相同的变量，而是希望有一个counterReducer处理修改计数器的所有操作：

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;

拆分成多个reducer 是保持代码井井有条的一种方式，但是你永远不会有两个reducer 可以各自修改相同的东西。每个 reducer 应该处理您整体状态的某个“部分”，例如

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

然后你可能有一个activeUserReducer, friendsReducer, subscriptonsReducer,historyReducer等。每个人都会处理状态的那一部分，但永远不会进入另一个减速器状态。

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

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

推荐阅读