了解扩展和解构使用在以下reducer

2016-08-17 75 views 1 likes

我想包围我的头如何减速器的作品，所以我可以添加一个REMOVE_ITEM到我的动作处理程序。我目前的尝试给了一个state.filter不是一个函数错误。了解扩展和解构使用在以下reducer

// ------------------------------------ 
// Action Handlers 
// ------------------------------------ 
const ACTION_HANDLERS = { 
    [GET_POSTS]: (state, action) => ({ ...state, ...action.payload}), 
    [PICK_ITEM]: (state, action) => ({ ...state, ...action.payload}), 
    [REMOVE_ITEM]: (state, action) => ({...state.filter(item => item !== action.payload)}) // <-- NOT WORKING 
} 

// ------------------------------------ 
// Reducer 
// ------------------------------------ 
const initialState = [] 
export default function contentReducer (state = initialState, action) { 
    const handler = ACTION_HANDLERS[action.type] 

    return handler ? handler(state, action) : state 
}

我不太确定那里的传播和解构是怎么做的。如果我理解正确，传播会给我们一个复制版本的状态，所以我们不会改变它，但以下内容如何：handler(state, action)创建我们的新状态？

来源

2016-08-17 S. Schenk

回答

例如，每个动作[GET_POSTS]传播state和action.payload并返回结果值;

是的，{...state位将state的所有属性分配到一个新对象中。

这句法是也像在Object.assign或_.merge参数的权利与现有的参数向左合并（过写作，如果它们是相同的属性。

也许，如果我们生产手动扩张这会更有意义

有了这些：

const state = { a: 1, b: 2, c: 3 }; 
const action = { payload: { c: 4 }};

所以这个：

{ ...state, ...action.payload}

扩展为：

{ ...{ a: 1, b: 2, c: 3 }, ...{ c: 4 }}

，并从左边第蔓延到：

{ a: 1, b: 2, c: 3, ...{ c: 4 }}

然后c被覆盖制作：

{ a: 1, b: 2, c: 4 }

希望有帮助。

来源

2016-08-17 12:44:41

了解扩展和解构使用在以下reducer

回答

相关问题