Я пытаюсь вернуть массив в react-redux, но получаю неопределенность, когда пытаюсь получить их в своем компоненте реакции.
Как вернуть массив, используя случаи "GET_TODO", "GET_FINISHED", "GET_LATER".
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();
}
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 })
}
}
}





Некоторые из ваших действий обрабатываются вашим редуктором таким образом, что вы получите неопределенность. Поскольку у вас есть несколько ключей на вашем объекте, вам нужно убедиться, что вы обрабатываете только рассматриваемый ключ, например:
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
@Johan В таком случае я полагаю, что ваш редуктор не всегда возвращает состояние в том виде, в котором он был принят initialState, поэтому у его частей есть проблемы. если state.today не является итерируемым, то это не массив, что означает, что ваше состояние в этот момент имеет другую форму
Однако он по-прежнему возвращает ошибку: TypeError: state.today не является итерируемым.