的更新

Question

我从这个tutorial学习Redux，我不知道下面的传播运算符如何在对象和数组中工作。如果...state返回相同的内容，那么它在两种情况下都能如何工作？我认为它只会返回一个数组，所以它会在SHUTTER_VIDEO_SUCCESS内部工作，因为除了action.videos之外，它只会将状态内的任何内容传播到新数组中，但是如何SELECTED_VIDEO案例中的这项工作？没有键放置它。扩展运算符从默认的initialState权限中获取数组而不是键值对吗？

initialState.js

export default {
  images: [],
  videos: []
};

someComponent.js

import initialState from './initialState';
import * as types from 'constants/actionTypes';

export default function ( state = initialState.videos, action ) {
  switch (action.type) {
    case types.SELECTED_VIDEO:
      return { ...state, selectedVideo: action.video }
    case types.SHUTTER_VIDEO_SUCCESS:
      return [...state, action.videos];
    default:
      return state;
  }
}

Answer 1

的更新

Spread语法允许您将数组扩展到一个对象中（数组在技术上是对象，就像js中的所有内容一样）。将数组扩展到对象时，它会为每个数组项向对象添加key: value对，其中键是索引，值是存储在数组中该索引处的值。例如：

const arr = [1,2,3,4,5] const obj = { ...arr } // { 0: 1, 1: 2, 2: 3, 3: 4, 4: 5 } const arr2 = [{ name: 'x' }, { name: 'y' }] const obj2 = { ...arr2 } // { 0: { name: 'x' }, 1: { name: 'y' } }

您也可以将字符串传播到数组和对象中。对于数组，它的行为与String.prototype.split类似：

const txt = 'abcdefg' const arr = [...txt] // ['a','b','c','d','e','f', 'g']

对于对象，它将按字符拆分字符串并按索引分配键：

const obj = { ...txt } // { 0:'a',1:'b',2:'c',3:'d',4:'e',5:'f',6:'g' }

因此，当您将数组扩展到对象中时，您可能会获得一些有用的数据。但是，如果您给出的示例是您实际使用的示例，那么您将遇到问题。见下文。

=============

对于redux中的reducer，当您使用带有数组的spread语法时，它会将数组中的每个项目分散到一个新数组中。它与使用concat基本相同：

const arr = [1,2,3] const arr2 = [4,5,6] const arr3 = [...arr, ...arr2] // [1,2,3,4,5,6] // same as arr.concat(arr2)

使用对象，扩展语法将key: value个对从一个对象传播到另一个对象：

const obj = { a: 1, b: 2, c: 3 } const newObj = { ...obj, x: 4, y: 5, z: 6 } // { a: 1, b: 2, c: 3, x: 4, y: 5, z: 6 }

这两种方法可以帮助您的数据在Reducer中保持不变。 spread语法复制数组项或对象键/值，而不是引用它们。如果对嵌套对象或数组中的对象进行任何更改，则必须考虑到这一点，以确保获得新副本而不是变异数据。

如果您将数组作为对象键，则可以将整个对象扩展为新对象，然后根据需要覆盖单个键，包括需要使用扩展语法进行更新的数组的键。例如，对示例代码的更新：

const initialState = { images: [], videos: [], selectedVideo: '' } // you need all of your initialState here, not just one of the keys export default function ( state = initialState, action ) { switch (action.type) { case types.SELECTED_VIDEO: // spread all the existing data into your new state, replacing only the selectedVideo key return { ...state, selectedVideo: action.video } case types.SHUTTER_VIDEO_SUCCESS: // spread current state into new state, replacing videos with the current state videos and the action videos return { ...state, videos: [...state.videos, ...action.videos] } default: return state; } }

这表示更新状态对象和该对象的特定键是数组。

在您给出的示例中，您正在动态更改州的结构。它以数组开头，然后有时会返回一个数组（当SHUTTER_VIDEO_SUCCESS时）并且有时会返回一个对象（当SELECTED_VIDEO时）。如果您想拥有一个reducer函数，则不会将initialState与视频数组隔离开来。您需要手动管理所有状态树，如上所示。但是你的reducer可能不应该根据动作切换它发回的数据类型。这将是一个不可预测的混乱。

如果你想将每个键分成一个单独的缩减器，你将有3个（图像，视频和selectedVideo）并使用combineReducers来创建你的状态对象。

import { combineReducers } from 'redux' // import your separate reducer functions export default combineReucers({ images, videos, selectedVideos })

在这种情况下，每当您调度动作以生成完整的状态对象时，每个reducer都将运行。但是每个reducer只会处理它的特定键，而不是整个状态对象。因此，您只需要对数组等的键进行数组更新逻辑。

Answer 2

数组也是键/值对，但键是索引。它使用的是ES6 destructuring和spread syntax。

Redux docs on the subject

您可能还想阅读ES6属性值的简写（或其任何名称）：

ES6 Object Literal in Depth

每当您发现自己分配与属性名称匹配的属性值时，您可以省略属性值，它隐含在ES6中。

Answer 3

根据教程：

create-react-app预装了babel-plugin-transform-object-rest-spread，允许您使用spread（...）运算符以简洁的方式将可枚举属性从一个对象复制到另一个对象。对于上下文，{... state，videos：action.videos}计算为Object.assign（{}，state，action.videos）。

所以，这不是ES6的功能。它使用插件让您使用该功能。

链接：https://babeljs.io/docs/plugins/transform-object-rest-spread/

扩展运算符如何在数组与obj中工作？

3 个答案:

的更新