Необходимо запустить .slice в состоянии React Redux Reducer - PullRequest
0 голосов
/ 21 ноября 2018

У меня есть приложение, которое использует React, Redux и Sagas.У меня есть редуктор, который имеет состояние, которое представляет собой массив объектов.Я хочу, чтобы этот редуктор обрабатывал определенное действие, удаляя первый элемент массива.Я понимаю, что состояние должно быть неизменным, и поэтому я не могу просто позвонить .shift.

Вот что я пытаюсь сделать сейчас:

const flashcards = (state = [], action) => {
    switch (action.type) {
      case 'MAKE_FLASHCARD':
      console.log(action.payload)
        return action.payload;
      case 'UPDATE_FLASHCARD_ARRAY':
        return ({
          ...state.slice(1,state.length)
        })
      default:
        return state;
    }
  };


  export default flashcards;

...state.slice(1,state.length) работает при первом вызове UPDATE_FLASHCARD_ARRAY.Однако он перестает работать над будущими попытками.Я обнаружил, что это связано с тем, что состояние на самом деле не удаляет первый индекс с помощью моего метода среза, а устанавливает значения первого индекса равными нулю..

До вызова UPDATE_FLASHCARD_ARRAY:

[{"id":7,"account_id":1,"native_word":"pig","translation":"gris"},{"id":3,"account_id":1,"native_word":"cow","translation":"ku"},{"id":1,"account_id":1,"native_word":"cheese","translation":"ost"},{"id":2,"account_id":1,"native_word":"milk","translation":"melk"},{"id":8,"account_id":1,"native_word":"spider","translation":"ederkopp"}]

После вызова UPDATE_FLASHCARD_ARRAY:

{"0":{"id":3,"account_id":1,"native_word":"cow","translation":"ku"},"1":{"id":1,"account_id":1,"native_word":"cheese","translation":"ost"},"2":{"id":2,"account_id":1,"native_word":"milk","translation":"melk"},"3":{"id":8,"account_id":1,"native_word":"spider","translation":"ederkopp"}}

Метод среза очищает, возвращая состояние, отличное от исходного.Может ли кто-то указать, что я здесь делаю неправильно?Все, что я хочу сделать, это удалять первый объект из массива состояний каждый раз, когда отправляется UPDATE_FLASHCARD_ARRAY.

Ответы [ 2 ]

0 голосов
/ 21 ноября 2018

Вы пытались сделать return state.slice(1) вместо return ({...state.slice(1,state.length)})?Последний создает объект, который имеет те же ключи, что и Array, но на самом деле не такой, как Array:

Array.isArray([1, 2, 3]) === true
Array.isArray({...[1, 2, 3]}) === false
({...[1, 2, 3]}).slice(1) -> TypeError
0 голосов
/ 21 ноября 2018

.slice уже возвращает новый массив, который вам не нужно распространять, вы также распространяете его в объект, поэтому вы видите {"0":...:

case 'UPDATE_FLASHCARD_ARRAY':
  return state.slice(1,state.length)
...