Question

这是来自非常简单的博客react-redux app的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

这行代码有什么作用？

基本上它做了两件事：

通过将所有可枚举属性从state复制到{}，将旧状态属性添加到新对象。以下是引用表here：

另一种方法是使用提出的对象扩展语法对于允许您使用传播的JavaScript的下一个版本（...）运算符将一个对象的可枚举属性复制到另一种更简洁的方式。对象扩展运算符是概念上类似于ES6阵列扩展运算符。

使用作为评估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 确实发生了状态变化,（因此组件将被重新渲染）

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

2 个答案: