Question

我正在修订对Redux的理解并做出反应。 React组件正在运行，并且我有一个knex数据库设置。我有一个使用以下语法的减速器。

import { FETCH_POSTS, NEW_POST } from '../actions/types';

const initialState = {
  items: [],
  item: {}
}

export default function(state = initialState, action) {
  switch (action.type) {
    case FETCH_POSTS:
        return {
        ...state,
        items: action.payload
    };
      case NEW_POST:
      return {
        ...state,
        item: action.payload
     };
    default:
      return state;
  }
}

这是我得到的错误。似乎不喜欢传播算子。

bundle.js:445 Uncaught Error: Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: C:/workspace/study-related-projects/apistudy7112018/1.0/client/reducers/postReducer.js: Unexpected token (18:8)

它不喜欢当前使用的语法Im，该语法是Traversy Media here的视频教程中使用的。导师对中间件的实现方式与我的实现方式不同，但并不认为这是个问题。因此，以防万一，我决定像在reducer中那样推入items数组：

import { FETCH_POSTS, NEW_POST } from '../actions/types';

const initialState = {
  items: [],
  item: {}
}

export default function(state = initialState, action) {
  switch (action.type) {
    case FETCH_POSTS:
      return state.items.push(action.payload)
    default:
      return state;
  }
}

而不是使用传播运算符的返回对象。

，然后在react。中的componentWillMount（）函数中调用调度。

事实证明很好，但是现在映射数组以打印出组件中的数据变得更加困难。

如果我通过控制台记录this.props.payload.posts，我会收到这些项目，但不确定是否可以访问它，因为发布后的下一个数组没有名称，只有数字0。我尝试了this.props.payload。 posts [0]，但似乎不起作用。这使我无法使用map数组函数映射数据。

通常，如果一切顺利，则可以使用mapToProps函数，然后：

this.props.items.posts.map(post) => {
  return post.name
})

但是我用这两种解决方案碰壁了。之所以出现此问题，是因为我试图实现一种不同的使用redux的方式，而不是以前的方式。这些都是为了我自己的学习和培训。

有人可以帮助我理解这两个问题吗？其中之一是，javascript不喜欢我使用的传播运算符语法，并吐出该错误。其次，尝试通过items数组获取原始数据。如果有人可以帮助我，我将非常感激。谢谢。

编辑：我可能会放一个git repo，以便每个人都可以看到我正在处理的代码。

Answer 1

假设您分别使用Babel和webpack来转换和捆绑源代码，请注意，默认情况下，对象不支持ES2015中的传播运算符，仅支持数组；对对象散布运算符的支持仍然是Stage 3 proposal in TC39。

要支持对象，您需要使用Babel插件@babel/plugin-proposal-object-rest-spread（适用于Babel 7）。那应该解决Unexpected token错误。

对于使用push的其他示例，我建议不要使用使数组变异的数组方法。它违反了关于pure functions的Redux的三项基本原则之一。简化器应该纯净，以保持状态不变，因为对状态的每次更改（调度的操作）都代表状态的快照。

您可以使用散布运算符来代替对数组使用push：

return {
  ...state,
  items: [
    ...state.items,
    action.payload,
  ],
};

（或类似的东西）

另一个注意事项：不要太长时间依赖componentWillMount()；它已在React 16.3中弃用，并将在React 17中完全删除。有关更多信息，请参见https://reactjs.org/docs/react-component.html#unsafe_componentwillmount。如果您要通过AJAX或其他异步方法来获取数据，则最好使用componentDidMount()。

Answer 2

例如，从第一个代码中，我敢冒险建议action.payload是一个数组，因此在第二种情况下，您需要推送该数组的内容

case FETCH_POSTS:
  return state.items.push(...action.payload)

但是我也建议不要使用mutate状态

使用扩展运算符进行redux反应？数组映射有问题吗？

2 个答案: