我怎樣才能使這個 redux function 更有效率？

Question

我的初始版本沒有使用克隆。 但是useSelector()在我添加另一個克隆語句之前沒有觸發。

我認為通過在 state 更改上克隆包含 object 的內容，這會導致它發生火災。 特別是這里的這條線。

  let newState = { ...state };

那是一個子問題。 為什么不返回新的 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});

更新

更新到鈎子后，除非我克隆嵌入式 arrays，否則我的 reduce 不再起作用。 在我不必這樣做之前：

Answer 1

redux 的核心設計原則之一是 state 是不可變的。 如果你想做出改變，你必須做出一個新的state，而不是修改舊的。 在制作新的 state 時，為此所需的復制可能會增加一些工作量，但它使更改檢測變得非常容易。 新舊state之間的簡單===可以立即確定state是否發生了變化。

因此，當您不進行復制時，redux 無法知道您更改了任何內容，因此它不會重新渲染您的組件。

Answer 2

你是對的，你需要對addMessage塊做同樣的事情，比如：

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