25

I'm using redux-toolkit in my react project. In a reducer of createSlice, I want to use the existing array of entities from the state and append the new array,before reducing the final state. But I'm unable to get the state value.

Here is the reducer code

export const usersSlice = createSlice({
  name: "users",
  initialState: initialUsersState,
  reducers: {
    usersCreated: (state: UsersState, action) => {
      // in real, return count from the server and append the entities on front-end only?
      const { count, entities } = action.payload;
      const existingEntities = state.entities;
      const newEntities = [...existingEntities, ...entities];
      const totalCount = state.totalCount+count;
      return {
        ...state,
        entities: newEntities,
        totalCount: totalCount,
        listLoading: false,
        error: null,
      };
    },
}});

When I debug the state.entites variable, it looks like this

enter image description here

Is there a way to access the current state value in reducer/extraReducer to recreate the state as per desire?

Because I assume directly working with state value outside the reducer would be a bad practice. Please guide me, if I'm wrong.

Edit

The code sandbox created by @Linda Paiste is working fine, that means we can access the state variable in reducer but we can't debug the state variable to dig deeper what is that state variable is holding at the moment, as Redux-toolkit is dealing the state in it's own way... As obvious from the debugging screenshot

enter image description here

4
  • 1
    I'll try to create a code sandbox today and linked it here.
    – Karl Lopez
    Oct 2, 2020 at 13:11
  • @karlmarxlopez still waiting for your input :) Oct 6, 2020 at 15:59
  • It says there's a 15 hour grace period on the bounty. But I'm not clear exactly what it is that you want to achieve. Is it just to have better debugging? You can use the Redux DevTools extension and that seems to work for me. I looked at the Immer docs as suggested by @karlmaxlopex and this page explains how the previous state is a "draft" rather than an actual object. So you can't can't console.log it but there is a workaround via JSON. Oct 7, 2020 at 18:46

5 Answers 5

22
+50

Summarizing the info in the comments from myself and @karlmaxlopez:

I copied your code into a CodeSandbox demo and found that the code does execute as expected. You are able to append to the state.entities array as if it were a normal array, even though the value of state.entities appears as a Proxy when inspecting or null when logging.

This is because redux-toolkit uses Immer to prevent you from directly mutating the state. In a normal redux reducer you receive the previous state as a function argument. The responsibility is placed on you as the user to not mutate it and instead to return a new object with the updated values by using non-mutating methods such as object spreading, array concat, etc. This is what you have done in your usersCreated reducer, which is totally fine.

But redux-toolkit and Immer opens up an additional possibility for how to write a reducer. In an Immer reducer, the state argument that is received by your function is a "draft" object. This means that you can directly mutate the draft object without causing any issues because it is just a draft and not the true state.

It also means that when you try to examine this previous state, it will behave strangely because of being just a draft and not the actual object that you are expecting it to be.

If you want to console.log a draft value, you can do this by calling console.log(current(value)) using the immer current function, which is included in the redux toolkit package. (edited per @markerikson's comment).

As far as inspecting the changes made to your state by each action, I recommend using Redux DevTools. I am able to see what actions were dispatched, the current state, what changes were made, etc. Redux DevTools screenshot

3
  • Thanks for your input. I still have 5 hours to award bounty :) I'm already using Redux DevTools. Actully, I was expecting something to get control of recreating state by applying store freeze strategy as we do in Angular :) I think we should have flags(on/off) in createSlice to get control of, how we will be changing the state Oct 8, 2020 at 4:55
  • 3
    Correct answer here, although I'd recommend using the Immer current API exported from RTK rather than JSON.stringify(). Oct 8, 2020 at 15:35
  • Life saver, this should be the first search result, upvoting. Apr 10, 2023 at 8:36
8

You can use current function provided by toolkit out of the box to get the current state value.

import {
    createSlice,
    current
} from '@reduxjs/toolkit';

export const parserSlice = createSlice({
    name: ReducerKeys.parser,
    initialState,
    reducers: {
        updateData: (state, action) => {
            console.log(action.payload, current(state), 'updating');
        }
    }
});
2
  • You can use current function provided by toolkit out of the box to get the current state value. Nov 22, 2022 at 6:46
  • But it seems current produces only read-only object.
    – Ashok
    Sep 29, 2023 at 14:09
4

I am simply copying/pasting an equivalent of the CodeSandbox solution by @Linda Paiste, so it's faster to find and reuse.

const usersSlice = createSlice({
  name: "users",
  initialState: {
   users: [],
  },
  reducers: {
    userCreated: (state, action) => {
      const newUser = action.payload;
      const existingUsers = JSON.parse(JSON.stringify(state.users));
      const newUsers = [...existingUsers, newUser];
      state.users= newUsers;
    }
  }
});
2

You can only reference the current slice state.

Therefore your only options are passing the desired entities as action's payload or implementing this action as a thunk createAsyncThunk and use getState() from its API.

2
1

You can use this function to retrieve a copy of the real state:

const getCurrentState = (state) => {
  try {
    return JSON.parse(JSON.stringify(state));
  } catch (e) {
    return null;
  }
};

then use this inside the reducer:

const currentState = getCurrentState(state);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.