Modify only part of the state in a react-redux app - reactjs

Question

As a practice exercise, I am writing a react-redux calculator app. My app's state is defined as:
const initialState = {
operator1: "", //first operand
operator2: "", //second operand
currentOp: "", // +, -, *, /
display:"", //the current calculator display
currentOperator:1 //which operand is being entered right now
}
currentOp holds the symbol of the operation currently being performed by the calculator, which, when entering the first operand, is empty. Therefore, when my calculator's numbers are pressed, I need to update the display, but without loosing my other state properties. I wrote my reducer like this:
import {NUMBER_PRESSED,OPERATION_PRESSED,EQUAL_PRESSED} from './actions';
const mainReducer = (state ={},action) =>
{
console.log("reducer called!");
console.log(action);
const newState = {};
//copy the operators to the new state. Only one will be changed. (Is this really necessary?)
newState.operator1 = state.operator1;
newState.operator2 = state.operator2;
switch(action.type)
{
case NUMBER_PRESSED:
if (state.currentOperator===1)
{
newState.operator1 = state.operator1 + action.payload;
newState.display= newState.operator1;
}
if(state.currentOperator===2)
{
newState.operator2 = state.operator2 + action.payload;
newState.display= newState.operator2;
}
//set the other properties of the state (Is this really necessary?)
newState.currentOperator = state.currentOperator;
newState.currentOp = state.currentOp;
console.log("The new state is:");
console.log(newState);
return newState;
case OPERATION_PRESSED:
break;
case EQUAL_PRESSED:
break;
default:
return state;
}
}
export default mainReducer;
Please note that I have not yet implemented the calculation operations, just updating the display. If I change the state variable directly, the calculator component does not update. Understandable, and this is expected behavior explained in the docs. However, it seems that I need to manually copy the entire state into a new variable so that it is preserved the next state (notice the "Is this really necessary?" comments in the code.
I have no problem copying all the app's state and returning an entirely new state object, but what happens on bigger applications with huge state trees? How is this managed? Is there a way to modify only part of the state in redux?

Answer 1

You can use things like the spread operator to duplicate entire objects without having to set each one manually:
const x = state.someArray.slice();
x[1] = "potato";
return {...state, someArray:x}
But to answer your concern, yes you do have to make an entire new duplicate of the state when changing it. It's not usually an issue, and doesn't take much time. If your state tree is HUGE then the solution should be splitting up that tree into separate reducers, that way you only have to duplicate and replace parts of the tree when changing the state.

Answer 2

1: If your state is decoupling you should use combineReducers It is recursion
2: If not, you should use es6 destructuring
3: What's more, you should consider about your state structure.(depends on your reducer code, i suggest...)
base on 2, for example
const mainReducer = (state = {},action) => {
switch(action.type) {
case NUMBER_PRESSED:
if (state.currentOperator===1) return {
...state,
operator1: state.operator1 + action.payload,
display: 'operator1'
}
if(state.currentOperator===2) return {
...state,
operator2: state.operator2 + action.payload,
display: 'operator2'
}
return state
default: return state;
}
}
If it's still huge with correctly program design....Product Design?