Измените одно свойство состояния в двух Редукторах в Redux

Question

У меня небольшая проблема с Redux в моем состоянии. Мне нужно иметь возможность изменить свойство счетчика в двух редукторах, поскольку оно обновляет значение для обоих редукторов (INCREMENT, DECREMENT). К сожалению, я новичок в 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;

Index. js

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

const store = createStore(reducer);

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

Answer 1

Вы просто приближаетесь к ней с неправильной точки зрения, вам никогда не следует изменять одну и ту же переменную в двух редукторах, вместо этого вы хотите иметь один 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;

Разделение на несколько редукторов - это способ упорядочить ваш код, но у вас никогда не будет двух редукторов, каждый из которых может изменять одно и то же. Вместо этого каждый редуктор должен обрабатывать определенную «часть» вашего общего состояния, например,

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

, тогда у вас могут быть activeUserReducer, friendsReducer, subscriptonsReducer, historyReducer и др. c , И каждый из них будет обрабатывать эту часть состояния, но никогда не попадет в другое состояние редукторов.

Если вам нужно изменить два разных свойства одним действием, вы просто сделаете:

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