Каков наилучший способ обновления состояния с использованием хуков функции useReducer? - PullRequest
Новая
       11

Каков наилучший способ обновления состояния с использованием хуков функции useReducer?

1 голос
/ 22 сентября 2019

У меня есть список со следующими действиями:

  1. Добавление объекта в массив с использованием функции useReducer().
  2. Remove Объект из массива с использованием функции useReducer().
  3. Заменить новый массив старым массивом с использованием функции useReducer().

Мне нужно лучшееи безопасный способ обновить мой список.

В настоящее время я сделал что-то вроде ниже, но это не работает должным образом. 

const reducer = (state, {type, value}) => {
    switch(type){
        case 'replacenewarray':
            return value;
        case 'additem':
            return {...state, value}
        case 'removeitem':
            return state.filter(item => item.room !== value);
        default:
            return state;
    }
}

Мой функциональный компонент такой, как показано ниже: 

const newArray = [
     {room: 'someroomid1', ....},
     {room: 'someroomid2', ....},
     {room: 'someroomid3', ....}
];

const itemToAdd = {room: 'someroomid4', ....};
const itemToRemoveWithRoomId = 'someroomid2';

export const Group = memo(props=> {

    const [list, setList] = useReducer(reducer, []);

    setList({type: 'replacenewarray', value: newArray});
    setList({type: 'additem', value: itemToAdd});
    setList({type: 'removeitem', value: itemToRemoveWithRoomId});


});

1 Ответ

1 голос
/ 22 сентября 2019

Согласно вашему коду ваше состояние - Array, убедитесь, что вы сохраняете тип при возврате его из useReducer: 

const reducer = (state, { type, value }) => {
  switch (type) {
    case 'replacenewarray':
//             v Array as intended
      return value;
    case 'additem':
//             v Fix it to return an array
      return [...state, value];
//             v Object
//    return {...state, value}
    case 'removeitem':
//             v Array as intended
      return state.filter(item => item.room !== value);
    default:
      return state;
  }
};

Кроме того, вы должны вернуть ReactElement или Group не будет рассматриваться как функциональный компонент . 

export const Group = memo(props => {
  ...
  return <>Some React Element</>;
});
...