React Redux Button

Вопрос-ответ JavaScript
1

Столкнулся с такой проблемой. Есть две кнопки, нужно при нажатии на одну из них, менять цвет обеих, с помощью React Redux. Вот что у меня получилось, но код не работает. Подскажите, в чем ошибка, уже перепробовал все, но так и не работает. Если меняю цвет по умолчанию, то срабатывает, а по нажатию никакого результата

import {GREEN, RED} from "../constants";


export const actionRed = () => ({
    type: RED
});


export const actionGreen = () => ({
    type: GREEN
});

========================
import { createStore } from "redux";

import { counterReducer } from "../reducers/counter";

export const store = createStore(counterReducer);

==============
import React from "react";
import { connect } from "react-redux";

import { actionGreen, actionRed } from "../../actions/counter";

const Counter = ({ actionRed,actionGreen, state }) => {
    return (
        <div>
            <button onClick={actionRed} style={{backgroundColor: state}}>Red</button>
            <button onClick={actionGreen} style={{backgroundColor: state}}>Green</button>
        </div>
    );
}

const mapStateToProps = (state) => ({state });

const mapDispatchToProps = {
    actionRed,
    actionGreen
};

export const CounterContainer = connect(mapStateToProps, mapDispatchToProps)(Counter);
============
const initialColor ={
    background: 'white'
}

const initialRed ={
    background: 'red'
}

const initialGreen ={
    background: 'green'
}


export const counterReducer = (state=initialColor.background, action) => {
    switch(action.type) {
        case "RED": {
            return {
                state:initialRed.background
            };
        }
        case "GREEN": {
            return {
                state:initialGreen.background
            }
        }
        default: {
            return state;
        }
    }
};
2

В компоненте ты ожидаешь, что в state сразу придет цвет

 <button onClick={actionRed} style={{backgroundColor: state}}>Red</button>

А в редьюсере ты оборачиваешь его в дополнительные свойства.

export const counterReducer = (state=initialColor.background, action) => {
    switch(action.type) {
        case "RED": {
            return {
                state:initialRed.background
            };
        }

возвращай из редьюсера цвет и все должно заработать:

        case "RED": {
            return initialRed.background
2 лайка
3

или костыль :-)
const mapStateToProps = (state) => ({ state: state.state });

Вместо этого import {GREEN, RED} from "../constants"; можно перечисление ввести

import { ButtonColorEnum } from "../ButtonColorEnum";
export const ButtonColorEnum = {
  RED: 'RED',
  GREEN: 'GREEN'
}

и в таком простом примере можно и диспатчем обычным воспользоваться:

const Counter = ({ backgroundColor, dispatch }) => {
    return (
        <div>
            <button onClick={() => dispatch({type: ButtonColorEnum.RED)} style={{ backgroundColor }}>Red</button>
            <button onClick={() => dispatch({type: ButtonColorEnum.GREEN)} style={{ backgroundColor }}>Green</button>
        </div>
    );
}

const mapStateToProps = (state) => ({ backgroundColor: state.state });
export const CounterContainer = connect(mapStateToProps)(Counter);