javascript - 在React中使用扩展运算符进行redux？数组映射问题？

Question

我目前正在修改我对 redux 和 React 的理解。 React 组件正在工作，并且我有一个 knex 数据库设置。我有一个使用以下语法的 reducer 。

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 。导师实现中间件的方式与我的方式不同，但他认为这不会成为问题。因此，为了以防万一，我决定像在 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()函数中调用dispatch..

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

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

一般来说，如果一切成功我就可以使用mapToProps函数，然后:

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

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

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

编辑:我可能会稍后发布一个 git 存储库，以便每个人都可以看到我正在处理的代码。

Answer 1

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

要支持对象，您需要使用 Babel 插件@babel/plugin-proposal-object-rest-spread(适用于 Babel 7)。这应该可以解决意外 token 错误。

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

您可以使用展开运算符，而不是使用数组推送:

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

(或类似的东西)

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