0

First of all, here is a CodeSandbox: https://codesandbox.io/s/todolist-reducer-0y3mb?file=/src/context/TodosReducer.js

The problem is that the state is not updating even though I'm passing a payload with a new array to the reducer.

I'm rearranging the array like this:

  const rearrange = (array, source, destination) => {
    const newArray = [...array];
    const newItem = array[source];
    newArray.splice(source, 1);
    newArray.splice(destination, 0, newItem);

    return newArray;
  };

Then dispatching it:

  const endDrag = newArray => {
    dispatch({
      type: "endDrag",
      payload: newArray
    });
  };

Then I return the new state in the reducer.

 return {
        ...state,
        todos: action.payload
      };

Logging the payload shows that it is ok, but the state still does not update. I'm using react beautiful dnd, so maybe that has something to do with it.

halfer
  • 19,824
  • 17
  • 99
  • 186

1 Answers1

0

I found the problem and fixed it!

Turns out I was wrapping my container component in the global context provider, but doing the same inside the container as well. That can apparently cause something like this. So simple, but just did not cross my mind.

Hope this answer helps someone out there.