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

Question

我目前正在修改我对 redux 和 react 的理解。 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)

它不喜欢我当前使用的语法，该语法来自 Traversy Media here 的此视频教程。导师实现中间件的方式与我的做法不同，但认为这不是问题。所以为了以防万一，我决定在减速器中像这样推送到 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()函数中调用dispatch..

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

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

一般来说，如果一切顺利，我就可以使用 mapToProps 函数，那么：

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

但是我在这两个解决方案中遇到了麻烦。这个问题是因为我试图实现一种不同的使用 redux 的方式，而不是我以前习惯的方式。这都是为了我自己的学习和训练。

谁能帮我理解这两个问题？一个是，javascript 不喜欢我正在使用的扩展运算符语法并吐回该错误。其次，尝试通过 items 数组获取原始数据。 如果有人可以帮助我，我将不胜感激。谢谢。

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

Answer 1

例如，从第一个代码中我冒昧地建议 action.payload 是一个数组，所以在第二种情况下，您需要推送数组的内容

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

但我也建议不要使用改变状态

Answer 2

假设您使用 Babel 和 webpack 分别对源代码进行转译和捆绑，请务必注意，默认情况下，ES2015 中的扩展运算符不支持对象，仅支持数组；对对象扩展运算符的支持仍然是Stage 3 proposal in TC39。

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

对于您使用push 的另一个示例，我建议不要使用改变数组的数组方法。关于pure functions，它违背了 Redux 的三个基本原则之一。你的 reducer 应该是纯粹的，以保持你的状态不可变，因为对你的状态的每次更改（调度的操作）都代表你的状态的快照。

您可以使用扩展运算符，而不是对数组使用 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()。