如何使这个 redux 功能更高效？

Question

我的初始版本没有使用克隆。但是 useSelector() 直到我添加另一个克隆语句才触发。

我认为通过在状态更改上克隆包含对象会导致它触发。特别是这里的这一行。

  let newState = { ...state };

这是一个子问题。为什么不返回新状态会导致 useSelector 触发。

我必须添加第二个克隆才能使其触发，如下所示：

const clone = [...newState.messages];

我觉得这种行为很奇怪，想知道这是否是一个错误。必须克隆我的消息数组也不是很有效。

完整的reducer如下：

const Messages = (state = {messages: false}, action) => {
  let newState = { ...state };
  switch(action.type) {
  case 'initializeMessages':
    newState.messages = action.messages;
    return newState;
  case 'addMessage':
    // cloning is required to make useSelector() fire
    const clone = [...newState.messages];
    clone.unshift(action.message);
    newState.messages = clone;
    return newState;
  }
  return state;
};

我使用它如下：

更新

  const messages = useSelector( (state) => state.Messages.messages );

调度

dispatch({type: 'addMessage', message: message});

更新

更新到钩子后，我的 reduce 不再起作用，除非我克隆嵌入式数组。在我不必这样做之前：

Answer 1

你是对的，你需要对 addMessage 块做同样的事情：

const newState = {
    ...state,
    messages: [
        ...newState.messages,
        action.message
    ]
};