Questions tagged [redux-toolkit]

Redux Toolkit (RTK) is the standard approach for writing Redux logic. It provides utilities to simplify several common Redux use cases, including store setup, defining reducers, immutable update logic, and even creating entire "slices" of state at once.

Redux Toolkit (RTK) is the standard approach for writing Redux logic. It provides utilities to simplify several common Redux use cases, including store setup, defining reducers, immutable update logic, and even creating entire "slices" of state at once.

Redux Toolkit was originally created to help address three common concerns about Redux:

  • "Configuring a Redux store is too complicated"
  • "I have to add a lot of packages to get Redux to do anything useful"
  • "Redux requires too much boilerplate code"

It provides tools that abstract over the setup process for Redux and handle the most common use cases, as well as include some useful utilities that will let the user simplify their application code.

RTK is beneficial to all Redux users. Whether you're a brand-new Redux user setting up your first project, or an experienced user who wants to simplify an existing application, Redux Toolkit can help you make your Redux code better.

3505 questions
162
votes
13 answers

Getting an error "A non-serializable value was detected in the state" when using redux toolkit - but NOT with normal redux

I am trying to switch an app I am building over to use Redux Toolkit, and have noticed this error coming up as soon as I switched over to configureStore from createStore: A non-serializable value was detected in the state, in the path:…
Hazy
  • 1,766
  • 2
  • 8
  • 12
77
votes
8 answers

Reset state to initial with redux-toolkit

I need to reset current state to initial state. But all my attempts were unsuccessful. How can I do it using redux-toolkit? const showOnReviewSlice = createSlice({ name: 'showOnReview', initialState: { returned: [], }, reducers: { …
Zireael
  • 875
  • 1
  • 6
  • 5
62
votes
6 answers

What is difference between reducers and extrareducers in redux toolkit?

I have learned about redux toolkit for 2 months, and in createSlice have reducers and extrareducers, I know they use to change state from dispatch but I don't know the difference, Where should we use them?
kalipts
  • 1,097
  • 1
  • 9
  • 21
58
votes
3 answers

How to use Redux-Thunk with Redux Toolkit's createSlice?

I have come across Redux Toolkit (RTK) and wanting to implement further functionality it provides. My application dispatches to reducers slices created via the createSlice({}) (see createSlice api docs) This so far works brilliantly. I can easily…
Jcov
  • 2,122
  • 2
  • 21
  • 32
53
votes
5 answers

Redux createStore() is deprecated - Cannot get state from getState() in Redux action

So, the createStore() Redux is now deprecated and configureStore() is recommended from @reduxjs/toolkit. I'm pretty sure it's related to not being able to get userInfo state using getState() in my actions. getState() of userLogin returns undefined.…
Evan B
  • 567
  • 1
  • 4
  • 6
46
votes
2 answers

what is main difference between redux and redux toolkit, is saga required in redux toolkit?

My question is which should I use? Can Redux Toolkit replace Redux core?
LXT
  • 726
  • 1
  • 7
  • 18
46
votes
4 answers

How do I see state when logging to the console instead of Proxy object inside reducer action?

When using console.log() inside a reducer action, the state prints as a Proxy object, instead of the object I actually want to see. How do I see the actual object? I am using redux-starter-kit createSlice, I am not sure if this has anything to do…
sutherlandahoy
  • 1,395
  • 1
  • 12
  • 24
36
votes
12 answers

Argument of type 'AsyncThunkAction' is not assignable to parameter of type 'AnyAction'

store.ts export const store = configureStore({ reducer: { auth: authReducer }, middleware: [], }); export type AppDispatch = typeof store.dispatch; export type RootState = ReturnType; hooks.ts export…
Lun
  • 861
  • 1
  • 10
  • 18
36
votes
7 answers

Error: An immer producer returned a new value *and* modified its draft. Either return a new value *or* modify the draft

I have my reducer const userAuthSlice = createSlice({ name: "userAuth", initialState: { token: '', }, reducers: { setToken: (state, action) => state.token = action.payload.test, }, }); And I have my dispatch…
Ivan Solobear
  • 399
  • 1
  • 3
  • 8
35
votes
2 answers

Actions in multiple slices in Redux toolkit

The Redux toolkit docs mention using actions (or rather action types) in multiple reducers First, Redux action types are not meant to be exclusive to a single slice. Conceptually, each slice reducer "owns" its own piece of the Redux state, but it…
Jonathan Tuzman
  • 11,568
  • 18
  • 69
  • 129
34
votes
5 answers

How can I access state of another slice in redux with redux-toolkit?

In my Redux store I have multiple slices and I would like to access the lang state of the settingsSlice inside the speciesSlice. Here is a code sample of my slices: const settingsSlice = createSlice({ name: 'settings', initialState: { lang:…
Jeremias
  • 343
  • 1
  • 3
  • 9
33
votes
4 answers

How do you pass arguments to createAsyncThunk in redux toolkit?

So i'm new to redux-toolkit and I want to do something really simple. I want to send some data on a POST request via this helper function. so I tried this export const submitPaymentToServer = createAsyncThunk( 'data/fetchAll', async ({ name,…
Red Baron
  • 7,181
  • 10
  • 39
  • 86
32
votes
2 answers

confusion about `useSelector` and `createSelector` with Redux toolkit

I am new to Redux and Redux toolkit. I learned that createSelector can accept multiple input selectors, which can be provided as separate arguments or as an array. The results from all the input selectors are provided as separate arguments to the…
Joji
  • 4,703
  • 7
  • 41
  • 86
30
votes
1 answer

Can I access state inside a createAsyncThunk w/axios with redux toolkit?

I'm fairly new to redux toolkit so I'm still having a few issues with it! As per the code below, I'm trying to access state (loginDetails.username and loginDetails.password) inside my createAsyncThunk. I'm obviously doing something wrong here - I've…
rizji
  • 323
  • 1
  • 3
  • 7
30
votes
2 answers

Is it possible to call a reducer function from another reducer function (within the same slice) using Redux Toolkit?

I have this small module management slice: const WorkspaceSlice = createSlice({ name: "workspace", initialState: { activeModule: null, modules: { ["someModule"]: { ...moduleRenderingData }, }, …
Asaf Sitner
  • 599
  • 1
  • 10
  • 18
1
2 3
99 100