Возвратный массив реаги-редукс - PullRequest
Новая
       8

Возвратный массив реаги-редукс

1 голос
/ 30 мая 2019

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

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

Редуктор, (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 })
    }
  }
}

1 Ответ

0 голосов
/ 30 мая 2019

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

    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
...