Question

我试图围绕这个减速器如何工作，所以我可以将REMOVE_ITEM添加到我的动作处理程序中。我当前的尝试给出了一个state.filter不是函数错误。

// ------------------------------------
// 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)创建我们的新状态？

Answer 1

例如，每个操作[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 }

希望有所帮助。

了解以下减速机的扩散和结构使用

1 个答案: