Понимание того, как распространение работает для действия редуктора - PullRequest
Новая
       50

Понимание того, как распространение работает для действия редуктора

1 голос
/ 16 октября 2019

Будучи новичком в хуках, я конвертировал некоторый старый код, который имел несколько свойств состояния, и наткнулся на этот код (потерял ссылку), когда искал, как уменьшить количество хуков useState, которые я первоначально установил. Следующий код ловушки useReducer работает как положено. Я думаю, что я понимаю, что значение состояния обновляется с помощью setState (dispatch), я пытаюсь понять, как 2-й аргумент редуктора фактически копирует значения между состоянием и newState с использованием синтаксиса расширения. Все примеры, на которые я смотрел, используют оператор switch и различные действия, которые возвращают новое состояние. React делает что-то в фоновом режиме, чтобы сделать эту копию? Если кто-нибудь может объяснить, как ... newState работает как действие редуктора, было бы полезно: 

const reducer = (state, newState) => ({ ...state, ...newState });
const [state, setState] = useReducer(reducer, initialState);

Ответы [ 2 ]

0 голосов
/ 17 октября 2019

В твоем примере больше нравится отдельный редуктор. Это немного сбивает с толку, когда у вас есть только одно действие.

Попробуйте добавить еще одно действие в вашем примере, вы получите следующее: 

const reducer = (state, newState) => ({ ...state, ...newState });
const [state, setState] = useReducer(reducer, initialState);
const reducer1 = (state, newState) => ({ ...state, ...newState });
const [state1, setState1] = useReducer1(reducer1, initialState1);

И если вы сделаете это так, как вы упомянули, вы можете сделать это следующим образом: 

const initialState = {someprops, type:1};//you have to sepecify type in state
    const reducer = (state, newState) => {
     switch(state.type){
    case 1:
     return { ...state, ...newState };
    case 2:
    //do something else
     return { ...state, ...newState };
    };
    const [state, setState] = useReducer(reducer, initialState);
0 голосов
/ 16 октября 2019

Обычно редукторы имеют оператор switch внутри, но это не является обязательным требованием. Reducer - это просто функция, которая принимает предыдущий ввод в качестве первого аргумента, действие (тип и полезную нагрузку) в качестве второго аргумента и возвращает то же состояние (если не найдено ни одного условия) или новое состояние. Но не обязательно использовать оператор switch. Итак, что вы делаете в этом редукторе, это то, что передается, когда второй аргумент объединяется в предыдущем состоянии.

const reducer = (state, newState) => ({... state, ... newState});

совпадает с 

const reducer = (state, newState) => {
    return { ...state, ...newState };
}

например 

const initialState = { a: 1, b: 2 };

При установке нового состояния 

setState({ b: 3, c: 4});

вызовет редуктор с предыдущим состоянием(начальное состояние) и выше объекта в качестве второго аргумента и редуктор вернет состояние после слияния 

{ ...initialState, ...newState } // pseudo code
{ ...{a: 1, b:2 }, ...{ b:3, c: 4} }
{ a: 1, b: 3, c: 4 } // returned result
...