How to change a button using Redux - reactjs

Question

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;
}
}
};

Answer 1

create a buttonColor variable in your redux store. Import same variable as a prop in your component to give background to buttons. on button click dispatch an event which will change the buttonColor.
if you are not using this color property anywhere else in your application I would suggest you move it to the component state instead of redux store. If you are using functional component you can make use of hooks to update the state.

Answer 2

Please use hooks as below if you want to continue with functional component.
import React from "react";
import { connect } from "react-redux";
const Counter = () => {
const [btnColor, changeBtnColor] = useState('blue');
return (
<div>
<button onClick={()=>changeBtnColor('red')} style={{backgroundColor: btnColor}}>Red</button>
<button onClick={()=>changeBtnColor('green')} style={{backgroundColor: btnColor}}>Green</button>
</div>
);
}
export default Counter;
Try the below snippet if you want to switch to class-based component.
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = {
btnColor: 'blue'
};
}
render() {
return (
<div>
<button onClick={()=>this.setState({this.state.btnColor: 'red'})} style={{backgroundColor: this.state.btnColor}}>Red</button>
<button onClick={()=>this.setState({this.state.btnColor: 'green'})} style={{backgroundColor: this.state.btnColor}}>Green</button>
</div>
);
}
}