Question

Redux 状态切片返回未定义，初始状态在 mapStateToProps 中不起作用

2017-01-27

2704

reactjs redux

我试图简单地对 mapStateToProps 中的 redux 存储数据进行排序，类似于 Dan Abramov 的 Egghead.io 视频中的做法： https://egghead.io/lessons/javascript-redux-colocating-selectors-with-reducers

我的问题是，最初状态返回未定义（因为它是异步获取的），那么解决这个问题的最佳方法是什么？当前代码如下（ _ 是 ramda 库）：

const diff = (a, b) => {
  if (a.name < b.name) {
    return -1
  }
  if (a.name > b.name) {
    return 1
  }
  return 0
}

const mapStateToProps = (state) => {
  return {
    transactions: _.sort(diff, state.transactions.all),
    expenditure: state.expenditure.all,
    income: state.income.all
  }
}

我认为 transactions.all 最初应该是一个空数组（这意味着代码可以工作），因为在 Reducer 中设置了初始状态：

const INITIAL_STATE = { transactions: { all: [] }, transaction: null }

export default function (state = INITIAL_STATE, action) {
  switch (action.type) {
    case FETCH_TRANSACTION:
      return { ...state, transaction: action.payload.data }
    case FETCH_TRANSACTIONS:
      return { ...state, all: action.payload.data }
    case EDIT_TRANSACTION:
      return { data: action.data }
    case ADD_TRANSACTION:
      return { data: action.data }
    case DELETE_TRANSACTION:
      return { ...state }
    default:
      return state
  }
}

提前致谢。

Answer 1

正如您所说，它是异步获取的。也许在组件呈现时，数据尚未准备好，从而导致对象未定义。

const SampleComponent = (props) => {
   if(props.transaction === undefined)
     return <Spinner /> // Loading state
   else 
     // your implementation
}

您可以进一步使代码更简洁，如 Dan 本人在此处的文档中所述： http://redux.js.org/docs/advanced/AsyncActions.html

Answer 2

设法解决了这个问题，因为在组合 Reducer 中，我已将交易设置为名称为 transactions ，然后在 Reducer 中，我基本上将初始状态设置为 transactions: { all: [] } 。

这导致 state.transactions.all 未定义，因为正确的状态结构实际上是 state.transactions.transactions.all 。

将交易 Reducer 更新为：

const INITIAL_STATE = { all: [], transaction: null }

export default function (state = INITIAL_STATE, action) {
  switch (action.type) {...

承诺返回之前的初始空交易数组意味着排序不再导致错误，然后在加载时正确排序。