这个 reducer 中的 return { ...state, } 到底是什么意思？

Question

这是来自非常简单的博客 react-redux 应用程序的 reducer_posts.js。

import _ from 'lodash';
import { FETCH_POSTS, FETCH_ONE_POST, DELETE_POST } from '../actions/index';

export default function (state = {}, action) {

  switch (action.type) {

    case DELETE_POST:
      return _.omit(state, action.payload);

    case FETCH_ONE_POST:
      return { ...state, [action.payload.data._id]: action.payload.data };

    case FETCH_POSTS:
      return _.mapKeys(action.payload.data, '_id');

    default:
      return state;
  }
}

_.omit(state, action.payload) 是在没有 action.payload 的情况下返回状态，所以它是在没有删除帖子的情况下返回状态。

_.mapKeys(action.payload.data, '_id') 创建一个与初始对象具有相同值的对象，但新对象的新键取自 action.payload.data._id

但我不能只得到该代码中的内容，这段语法正是这样做的：

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

这行代码有什么作用？ ... 是什么意思？

Answer 1

这行代码做了什么？

基本上它做了两件事：

1. 通过将所有可枚举属性从state 复制到{}，将旧状态属性添加到新对象。这是here的报价单：

另一种方法是使用提出的对象扩展语法 对于下一个版本的 JavaScript，它可以让你使用传播 (...) 运算符将可枚举属性从一个对象复制到 另一种更简洁的方式。对象扩展运算符是 概念上类似于 ES6 数组扩展运算符。

1. 创建一个新的计算属性，其键是action.payload.data._id 的评估结果，并将其值设置为action.payload.data 的评估结果。这是来自here 的引用：

从 ECMAScript 2015 开始，对象初始值设定项语法也 支持计算属性名称。这允许您放置一个表达式 在括号 [] 中，将计算为属性名称。这是 与属性访问器语法的括号符号对称， 您可能已经使用它来读取和设置属性。

下面是纯JS中的例子：

const action = {payload: {data: {_id: 'some'}}};
const oldState = {a: '3'};
const newState = {...oldState, [action.payload.data._id]: action.payload.data}
console.log(newState); // {a: '3', some: {_id: 'some'}}

Answer 2

此行基于当前状态的所有可用属性创建一个全新的对象，并且仅更新“action.payload.data._id”参数。

举个例子：当 Redux 被用作应用程序状态管理范式时，为了通知 Redux 任何状态的变化，应该创建一个新的状态对象（reducer 输出）来确保 Redux 发生了实际的状态变化, （因此组件将被重新渲染）