Изменить только часть состояния в приложении Reaction-Redux - PullRequest
Новая
       9

Изменить только часть состояния в приложении Reaction-Redux

0 голосов
/ 03 сентября 2018

В качестве практического упражнения я пишу приложение с калькулятором реактивного-редукса. Состояние моего приложения определяется как: 

const initialState = {
  operator1: "",  //first operand
  operator2: "",  //second operand
  currentOp: "",  // +, -, *, /
  display:"",     //the current calculator display
  currentOperator:1  //which operand is being entered right now
}

currentOp содержит символ операции, выполняемой в данный момент калькулятором, который при вводе первого операнда является пустым. Поэтому, когда номера моего калькулятора нажаты, мне нужно обновить отображение, но не теряя другие мои свойства состояния. Я написал свой редуктор так: 

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;

Обратите внимание, что я еще не реализовал операции расчета, просто обновляю отображение. Если я изменю переменную состояния напрямую, компонент калькулятора не обновится. Понятно, и это ожидаемое поведение, объясненное в документах. Однако кажется, что мне нужно вручную скопировать все состояние в новую переменную, чтобы оно сохраняло следующее состояние (обратите внимание на комментарии «Действительно ли это необходимо?» В коде). У меня нет проблем с копированием всего состояния приложения и возвращением совершенно нового объекта состояния, но что происходит в больших приложениях с огромными деревьями состояний? Как это удалось? Есть ли способ изменить только часть состояния в Redux?

Ответы [ 2 ]

0 голосов
/ 04 сентября 2018

1: Если ваше состояние разъединение , вы должны использовать ОбъединитьReducers Это рекурсия

2: если нет, вы должны использовать es6 destruuring

3: Более того, вам следует подумать о структуре вашего состояния (зависит от вашего кода редуктора, я предлагаю ...)

основание на 2, например 

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

Если он по-прежнему огромен при правильном дизайне программы ... Product Design?

0 голосов
/ 03 сентября 2018

Вы можете использовать такие вещи, как оператор распространения, чтобы дублировать все объекты без необходимости устанавливать каждый из них вручную: 

const x = state.someArray.slice();
x[1] = "potato";
return {...state, someArray:x}

Но чтобы ответить на ваше беспокойство, да, вы должны сделать совершенно новый дубликат состояния при его изменении. Обычно это не проблема и не занимает много времени. Если ваше дерево состояний ОГРОМНОЕ, тогда решение должно быть разделено на это дерево на отдельные редукторы, поэтому вам нужно только дублировать и заменять части дерева при изменении состояния.

...