在这个减速器中返回{... state,}的确切含义是什么？

Question

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

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的{}.这里是报价表在这里:

另一种方法是使用为下一版JavaScript提出的对象扩展语法,它允许您使用spread(...)运算符以更简洁的方式将可枚举属性从一个对象复制到另一个对象.对象扩展运算符在概念上类似于ES6阵列扩展运算符.

2. 使用作为评估结果的键创建新的计算属性,action.payload.data._id并将其值设置为计算结果action.payload.data.下面是从报价在这里:

从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'}}