Question

我想从redux商店列表中删除一个项目，一旦达到某个数字并返回新商店并添加新值，但减去列表中的第一个值（array.shift）。 / p>

想想一个填充商店的推特流，所以我们每隔六条推文从列表底部删除一条，然后在顶部添加一条推文。

代码：

// ------------------------------------
// Action Handlers
// ------------------------------------
const ACTION_HANDLERS = {
  [INIT_DATA]: (state, action) => {
    if (state.length < 5) {
      return [ ...state, action.payload.stream ]
    } else {
      return [ ...state.shift(), action.payload.stream ]
    }
  },
  [DISCONNECT]: (state, action) => ({ ...state, ...action.payload })
}
// ------------------------------------
// Reducer
// ------------------------------------
const initialState = []

export default function twitterStreamReducer (state = initialState, action) {
  const handler = ACTION_HANDLERS[action.type]

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

以上代码在lentgh＆gt;时返回一个新商店5并删除所有旧推文，而不仅仅删除底部推文。

关于最佳方法的任何想法，而不改变状态？

Answer 1

您可以使用Array.slice返回原始数组的浅副本减去切片项目。不要使用shift（）实际上会改变你的状态并导致各种各样的问题。

return [...state.slice(1), action.payload.stream]

Answer 2

http://en.cppreference.com/w/cpp/utility/functional/reference_wrapper/operator()返回移位的值，而不是删除了值的数组（它将其移位到位）。

你可以做到

state.shift()
[ ...state, action.payload.steam ]

虽然我非常确定Redux文档指定您应该避免直接对该州采取行动......

如何从列表中删除底部项目时将一个项目添加到redux商店列表的顶部

2 个答案: