返回数组 react-redux

Question

我试图在 react-redux 中返回一个数组，但是当我尝试在我的 react 组件中获取它们时，我得到了未定义的结果。

如何使用“GET_TODO”、“GET_FINISHED”、“GET_LATER”案例返回一个数组。

Reducer，（ 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 })
    }
  }
}

Answer 1

reducer 正在以某种方式处理您的某些操作，这会导致您无法定义。由于您的对象上有多个键，因此您需要确保只处理有问题的键，例如：

    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