Why can't I update the state using Redux?

Question

I'm trying to integrate Redux in a project that works already. I've configured the Redux store using multiple slices, here's the one causing troubles:

const initialCategoriesState = [];

const categoriesSlice = createSlice({
  name: "categories",
  initialState: initialCategoriesState,
  reducers: {
    setCategories(state, action) {
      state = action.payload;   
    },
  },
});

In my component I'm using useSelector to access the state:

const categories = useSelector(state => state.categories);

And to update it I dispatch an action, accordingly with the one declared in the slice:

const fetchedCategories = await fetchData(urlCategories, CATEGORIES);
dispatch(categoriesActions.setCategories(fetchedCategories));

But once I run the code, the categories constant gets never updated. Since I wasn't sure the action was getting the data, I tried to console.log the state inside the reducer it as it follows:

reducers: {
  setCategories(state, action) {
    console.log("state before", state);
    state = action.payload;
    console.log("state after", state);   
  },
},

The state is indeed changing, but not the extracted state in the categories constant.

Is there something I'm missing here?

Thremulant · Answer 1 · 2021-07-28T17:05:41.287

1

I've got the same problem a few months ago and solved it this way. But, I may be missing something too.

Please try this for your initial state:

const initialCategoriesState = { categories: [] };

And then in your reducer:

state.categories = action.payload;

edited Jul 28 '21 at 17:05

answered Jul 28 '21 at 16:54

Thremulant

566
5
15

I've tried and it works. I also did some googling to check if the initial state must be an object but found nothing. – astral_flight_adapter Jul 28 '21 at 19:26
It was the same for me. I was never able to update the state object, only it's properties. – Thremulant Jul 28 '21 at 21:51

score 1 · Answer 2 · answered Jul 28 '21 at 19:52

I've found one of the cool things about Redux Toolkit to be it's Entity Adapters, which can safely initialize your state while providing helper functions for updating your state. They (reasonably) assume that your slice will have collections, and probably a main collection of things with the same name as the slice. createEntityAdapter() allows you to do like:

const categoriesAdapter = createEntityAdapter()

// name the below "initialState" exactly
const initialState = categoriesAdapter.getInitialState({
    // this will, by default, get you an `entities{}` and `ids[]` representing your categories
    // you can add any additional properties you want in state here as well
})

Then, when you are wanting to update state, in your reducer you can do like:

reducers: {
  setCategories(state, action) {
    categoriesReducer.setAll(state, action.payload)
    // this will update both entities{} and ids[] appropriately
  },
},

Why can't I update the state using Redux?

2 Answers2