このレデューサーのreturn {... state、}はどういう意味ですか？

Question

これは非常にシンプルなblog 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からすべての列挙のプロパティをコピーして、新しいオブジェクトへの古い状態のプロパティを追加します：

は、基本的には2つのことを行います。ここで引用フォームhereさ：

別のアプローチは、対象のスプレッド構文を使用することですあなたが列挙プロパティをコピーするスプレッド （...）演算子を使用することができますはJavaScriptの次のバージョンの を提案1つのオブジェクトから別の方法で別のものに オブジェクトスプレッド演算子は、概念的には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'}}