Возвращаемый массив

Я пытаюсь вернуть массив в react-redux, но получаю неопределенность, когда пытаюсь получить их в своем компоненте реакции.

Как вернуть массив, используя случаи "GET_TODO", "GET_FINISHED", "GET_LATER".

Редуктор ( GET_ должен возвращать массив )

const initialState = {
  today: [1, 2, 3],
  finished: [3, 2, 1, 3],
  later: [2, 3, 1, 4, 2, 5]
};

export default (state = initialState, action) => {

  switch (action.type) {

    case 'ADD_TODO':
      return [...state.today, action.payload]
    case 'DELETE_TODO':
      return state.today.filter((item, index) => index !== action.payload)
    case 'GET_TODO':
      return state.today
    case 'ADD_LATER':
      return [...state, action.payload]
    case 'DELETE_LATER':
      return state.filter((item, index) => index !== action.payload)
    case 'GET_LATER':
      return [...state.later]
    case 'ADD_FINISHED':
      return [...state, action.payload]
    case 'DELETE_FINISHED':
      return state.filter((item, index) => index !== action.payload)
    case 'GET_FINISHED':
      return [...state.finished]
    default:
      return state;
  }
}

Реагировать компонент

componentDidMount() {
    this.props.get();
  }

mapStateToProps и mapDispatchToProps

function mapStateToProps(state) {
  return {
    today: state.important.today ? state.important.today : [],
    finished: state.important.finished ? state.important.finished : [],
    later: state.important.later ? state.important.later : [],

  }
}
function mapDispatchToProps(dispatch) {
  return {
    add: (value) => {
      dispatch({ type: 'ADD_TODO', payload: value })
    },
    remove: (index) => {
      dispatch({ type: 'DELETE_TODO', payload: index })
    },
    get: () => {
      dispatch({type:'GET_TODO'})
    },
    addToFinished: (value) => {
      dispatch({ type: 'ADD_FINISHED', payload: value })
    },
    removeFinished: (index) => {
      dispatch({ type: 'DELETE_FINISHED', payload: index })
    },
    addToLater: (value) => {
      dispatch({ type: 'ADD_LATER', payload: value })
    },
    removeLater: (index) => {
      dispatch({ type: 'DELETE_LATER', payload: index })
    }
  }
}
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
1
0
2 662
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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

    case 'DELETE_LATER':
      return state.filter((item, index) => index !== action.payload)

Предположительно должно быть:

    case 'DELETE_LATER':
      return {
         ...state,
         later: state.later.filter((item, index) => index !== action.payload)
      }

И в качестве другого примера, ваш обработчик ADD_TODO вызовет проблемы:

const initialState = {
  today: [1, 2, 3],
  finished: [3, 2, 1, 3],
  later: [2, 3, 1, 4, 2, 5]
};

const reducer = (state = initialState, action) => {

  switch (action.type) {

    case 'ADD_TODO':
      return [...state.today, action.payload]
    case 'DELETE_TODO':
      return state.today.filter((item, index) => index !== action.payload)
    case 'GET_TODO':
      return state.today
    case 'ADD_LATER':
      return [...state, action.payload]
    case 'DELETE_LATER':
      return state.filter((item, index) => index !== action.payload)
    case 'GET_LATER':
      return [...state.later]
    case 'ADD_FINISHED':
      return [...state, action.payload]
    case 'DELETE_FINISHED':
      return state.filter((item, index) => index !== action.payload)
    case 'GET_FINISHED':
      return [...state.finished]
    default:
      return state;
  }
}

const newState = reducer(initialState, { type: 'ADD_TODO', payload: 3})

console.dir(newState)

Обратите внимание, что теперь вы потеряли другие ключи из своего состояния.


В качестве дополнительного комментария, когда вы возвращаете массив, код:

return [...array]

Эквивалентно:

return array

Однако он по-прежнему возвращает ошибку: TypeError: state.today не является итерируемым.

Johan 30.05.2019 19:33

@Johan В таком случае я полагаю, что ваш редуктор не всегда возвращает состояние в том виде, в котором он был принят initialState, поэтому у его частей есть проблемы. если state.today не является итерируемым, то это не массив, что означает, что ваше состояние в этот момент имеет другую форму

OliverRadini 30.05.2019 23:27

Другие вопросы по теме