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

【问题标题】：Slice of Redux state returning undefined, initial state not working in mapStateToProps返回未定义的 Redux 状态切片，初始状态在 mapStateToProps 中不起作用
【发布时间】：2017-06-13 00:32:24
【问题描述】：

我试图简单地对 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
  }
}

提前致谢。

【问题讨论】：

我不确定，但 INITIAL_STATE 没有 transations 键，所以不应该是 _.sort(diff, state.all) 吗？
嗯是的...对于其他减速器也有一个 all，所以也许我需要更明确地为每个减速器：defaultState = { transactions: { all: []}，exploration: { all: [] }};谢谢，我试试这个

标签： reactjs redux

【解决方案1】：

正如你所说，它是异步获取的。可能在渲染组件时，数据还没有准备好，导致对象未定义。

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

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

【讨论】：

感谢 pierreg，但在异步操作返回数据之前，reducer 中的默认状态将 .all 初始化为一个空数组，因此代码不应出错。
是的。 transactions.all 没有初始状态。 (transactions: null) 不是对象的整个形状。您可以将初始状态修改为 (transaction: { all: [] }} 或在继续排序之前检查 transactions 是否不为空。您可以同时进行这两种方式。

【解决方案2】：

设法解决了这个问题，因为在组合减速器中，我设置了名称为 transactions 的事务，然后在减速器中，我基本上将初始状态设置为 transactions: { all: [] } }。

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

将事务化简器更新为：

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

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

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

【讨论】：