React Redux Button

Hello, I need your help.
I have an assignment, create two buttons(these buttons are initially white background).
When I click on one of them, I need both buttons to change color, using Redux.
The buttons I created. I don’t know how to change the color.
Can anyone help? I would really appreciate it.

this is my code

import { COUNTER_GREEN, COUNTER_RED } from "../constants";

export const actionRed = () => ({

    type: COUNTER_RED

});

export const actionGreen = () => ({

    type: COUNTER_GREEN

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

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

const Counter = ({ actionRed, actionGreen }) => {
    return (
        <div>
            <button onClick={actionRed}>Red</button>

            <button onClick={actionGreen}>Green</button>
        </div>
    );
}

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

const mapDispatchToProps = {
    actionRed,
    actionGreen
};

export const CounterContainer = connect(mapStateToProps,mapDispatchToProps)(Counter);
======================


const red = 'red';
const green = 'green';

const redtest = {
color: 'red'
}


export const counterReducer = (state={redtest}, action) => {
    switch(action.type) {
        case "COUNTER_RED": {
            return {
                state: {redtest}
            };

        }
        case "COUNTER_GREEN": {
            return {
                state:green


            };
        }
        default: {
            return state;
        }
    }
};

=================

import { createStore } from "redux";

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

export const store = createStore(counterReducer);


Hey Tom,

nice to meet you! :wave:

Great work so far.

I think you did the whole state management part.
Now you have the state (the color) sitting in your store.

What do you think could be a next viable step?
Not code-wise, but logical-wise.

I think after clicking the state should change :slightly_smiling_face:
But I don’t know how to do it.
Аnd I need to write the code in switch, to return one of the cases

So the state can be anything, but it makes sense for it to be an object, so that you can look up state.color and get the colour. Then maybe use the style property on the elements you want a colour applied to?

ok, I changed it
Right?
It doesn’t work

const red = {
    color: 'red'
}

case "COUNTER_RED": {
            return {
              state:red.color
            };

I think you’re making this more complicated than it is (though you’re just about there…*)

You have a function which takes an object (given the name state) + an action and returns an object that looks basically the same as the one that went in.

state is { color: "white" }
// put that object into the function
// along with a turn red action:
function returns the object { color: "red" }
// put that object into the function
// along with a turn green action
function returns the object { color: "green" }

There shouldn’t be any property actually called state, that’s just the variable name you’re giving to the object.

* _and ummmmm, all the stuff you’re learning now includes a lot of boilerplate which you don’t need with the more recent (like past 2-3 years) versions, particularly with the Redux toolkit the maintainers released last year. Concepts are exactly the same though

I did but it doesn’t work.
I don’t understand where and what I need to fix

const state = {
    background: 'white'
}

const red = {
    background: 'red'
}

const green = {
    background: 'green'
}

export const counterReducer = (state, action) => {
    switch(action.type) {
        case "COUNTER_RED": {
            return {
                state:red
            };
        }
        case "COUNTER_GREEN": {
            return {
                state:green
            };
        }
        default: {
            return state;
        }
    }
};

can anyone help with the code?

This is not a special redux thing. Look at the function:

export const counterReducer = (state, action) => {

It’s a function that takes an object with two parameters, state and action

You’re shouldn’t be returning something called “state”, that’s like doing

function add (x, y) {
  return { x: x + y }
}

x is just what the argument is called, it should return x + y.

For the reducer, you’re supposed to be returning the state, not an object with the property state that has the actual state as its value.