How can I make this redux function more efficient?

Question

My initial version did not use cloning. However useSelector() was not firing until I added another clone statement.

I thought that by cloning the containing object on a state change this would cause it tor fire. Particularly this line here.

  let newState = { ...state };

That is a sub question. Why does not returning a new state cause useSelector to fire.

I had to add a second clone to get it to fire as follows:

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

I find this behavior odd, and wonder if it might be a bug. Also not very efficient to have to clone my messages array.

The complete reducer is as follows:

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;
};

and I use it as follows:

Updating

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

Dispatching

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

UPDATE

After updating to hooks, my reduces don't work anymore unless I clone embedded arrays. Before I did not have to do this:

Spreading into an object is a shallow copy. – Dave Newton Dec 28 '21 at 00:42 — Dave Newton, Dec 28 '21 at 00:42

score 0 · Answer 1 · answered Dec 28 '21 at 00:39

0

you are right, you need to do the same for addMessage block like:

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

answered Dec 28 '21 at 00:39

Sysix

1,572
1
16
23

How can I make this redux function more efficient?

1 Answers1