在這個reducer中返回{... state，}究竟意味着什麼？

這是來自非常簡單的blog react-redux應用程序的reducer_posts.js。在這個reducer中返回{... state，}究竟意味着什麼？

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 };

這行代碼是做什麼的？這是什麼意思？

來源

2017-05-29 John Taylor

[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator](https： //developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator） – Boky

[反應中的三個點有什麼作用？]（https://stackoverflow.com/questions/ 31048953/what-does-three-dots-in-react-do） –

嘿，我的回答（https://stackoverflow.com/a/44245917/2545680）有幫助嗎？什麼都不清楚？ –

這行代碼是做什麼的？

基本上它做了兩兩件事：

通過複製state所有枚舉的屬性到{}再添老態性質的新對象。這裏是報價表here：

的另一種方法是使用對象傳播語法提出對JavaScript的下一個版本，它可以讓你使用擴（...）運算符來複制枚舉的屬性從一個對象到更簡潔的另一個對象。對象擴展運算符在概念上類似於ES6陣列擴展運算符。

創建與作爲評價action.payload.data._id的結果，並將其值設爲評價action.payload.data的結果鍵的新計算的屬性。下面是從here報價：

與2015年的ECMAScript開始，對象初始化語法也支持計算屬性名。這允許你把一個表達式置於括號[]中，這將作爲屬性名稱來計算。這是與您可能用於讀取和設置屬性的屬性訪問器語法的括號符號對稱。

以下是在純的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'}}

來源

2017-05-29 15:23:32

謝謝，我終於明白了！ –

在這個reducer中返回{... state，}究竟意味着什麼？

回答

相關問題