Creating one reducer for similar kind of actions - reactjs

Question

In my project, I am persisting state of option buttons in redux. There are different buttons group and I am handling their click action in single function handleClick. But it seems like it’s not working. Should I create a different handler for each button group? Can anyone suggest the best solution?
code :
import React, { Component } from "react";
import { Button } from "semantic-ui-react";
import { withRouter } from "react-router";
import Answers from "../Answers/Answers";
import { handleClick } from "../../actions/handleClickAction"
import { connect } from 'react-redux'
class Section extends Component {
handleClick = event => {
this.props.handleClick(event);
};
render() {
console.log(this.state);
let styles = {
width: '50%',
margin: '0 auto',
marginBottom: '15px'
}
const { history } = this.props;
const { que1, que2, que3 } = this.state;
return (
<>
<p>1. I was stressed with my nerves on edge.</p>
<Button.Group widths="5" onClick={this.handleClick} style={styles}>
<Answers selected={this.state.que1} style={{ backgroundColor: 'red' }} />
</Button.Group>
{` `}
<p>2. I lost hope and wanted to give up when something went wrong.</p>
<Button.Group widths="5" onClick={this.handleClick} style={styles}>
<Answers selected={this.state.que2} style={{ backgroundColor: 'red' }} />
</Button.Group>
{` `}
<p>3. I feel very satisfied with the way I look and act</p>
<Button.Group widths="5" onClick={this.handleClick} style={styles}>
<Answers selected={this.state.que3} style={{ backgroundColor: 'red' }} />
</Button.Group>
<p />
{` `}
<Button
disabled={!que1 || !que2 || !que3}
onClick={() => history.push("/section2", [this.state])}
>
NEXT
</Button>
</>
);
}
}
export default withRouter(connect(null, { handleClick })(Section));
main.js
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import store from "./store";
import { Provider } from 'react-redux'
ReactDOM.render(<Provider store={store}><App /></Provider>, document.getElementById("root"));
index.js
import { combineReducers } from "redux";
import selectOptionReducer from "./selectOptionReducer";
export default combineReducers({
selectOption: selectOptionReducer
})
selectOptionReducer.js
import { SELECT_OPTION } from "../actions/types"
const initialState = {
que1: "",
que2: "",
que3: "",
que4: "",
que5: ""
}
export default (state = initialState, action) => {
switch (action.type) {
case SELECT_OPTION:
return {
...state,
que1: action.payload,
que2: action.payload,
que3: action.payload,
que4: action.payload,
que5: action.payload
};
default:
return state;
}
}
store.js
import { createStore } from 'redux'
import selectOptionReducer from "./reducers/selectOptionReducer";
const store = createStore(selectOptionReducer);
export default store;
handleClickAction.js
import { SELECT_OPTION } from "./types"
export const handleClick = e => {
return {
type: SELECT_OPTION,
payload: e.target.attributes.getNamedItem("data-key").value
}
}
output :

Answer 1

From what I can see, that reducer would be setting the state for all questions to the same answer on every action.
You need a way to specify which question is being answered.
I would go with something like the following which creates a custom onClick handler for each question and passes the question id to the action creator to be included in the reducer payload. The reducer then uses that id to only update the question being answered.
(untested)
selectOptionReducer.js
export default (state = initialState, action) => {
switch (action.type) {
case SELECT_OPTION:
const { questionId, value } = action.payload;
return { ...state, [questionId]: value };
default:
return state;
}
}
handleClickAction.js
export const handleClick = ({ questionId, e }) => {
return {
type: SELECT_OPTION,
payload: { questionId, value: e.target.attributes.getNamedItem("data-key").value }
}
}
component
class Section extends Component {
handleClick = questionId => e => {
this.props.handleClick({ questionId, e });
};
...
<Button.Group widths="5" onClick={this.handleClick("que1")} style={styles}>