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.

539 questions
30
votes
3 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
  • 301
  • 1
  • 3
  • 3
26
votes
3 answers

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

==================== TLDR ========================== @markerikson (see accepted answer) kindly pointed towards a current solution and a future solution. EDIT: 15th Nov 2020: Link to Docs to use an Async Thunk in Slice RTK does support thunks in…
Jcov
  • 1,494
  • 2
  • 14
  • 21
21
votes
4 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
  • 317
  • 2
  • 5
12
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
  • 6,575
  • 7
  • 33
  • 77
10
votes
2 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
  • 796
  • 8
  • 18
9
votes
0 answers

React Testing Library with Redux Toolkit

I am using Redux Toolkit approach by creating: slices with reducer and extra reducers thunks with createAsyncThunk API I Want to understand what is the best way to test with React Testing Library the: slices with reducer and extra reducers thunks…
9
votes
1 answer

How do I resolve 'Property 'type' is missing in type 'AsyncThunkAction' using Redux Toolkit (with TypeScript)?

I'm using Redux Toolkit with the thunk/slice below. Rather than set the errors in state, I figure I could just handle them locally by waiting for the thunk promise to resolve, using the example provided here. I guess I could avoid doing this, and…
Chance
  • 10,029
  • 6
  • 55
  • 73
8
votes
4 answers

Cannot set getState type to RootState in createAsyncThunk

I cannot set the return type of getState() to RootState. I'm using typescript and VSCode. I have to set the type to any, which stops IntelliSense on that object. Below is the code that has the problem: export const unsubscribeMeta =…
user10832440
8
votes
4 answers

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

So, I'm new to redux toolkit. I have my reducer const userAuthSlice = createSlice({ name: "userAuth", initialState: { token: '', }, reducers: { setToken: (state, action) => state.token = action.payload.test, …
Ivan Solobear
  • 95
  • 1
  • 5
7
votes
1 answer

How to use dispatch in createSlice reducer?

For example i have this slice and I want to use dispatch in setUser. How can I do this? const contactsSlice = createSlice({ name: 'contacts', initialState: initialState, reducers: { setUsers: (state, { payload }) => { // I want to…
6
votes
2 answers

How to reuse the reducer logic in Redux Toolkit createSlice function?

I'm new to React and I'm learning to use React to build a web app. I found Redux Toolkit useful and use its createSlice() function to implement the basic features. However, I encountered a "best practice"-related problem and I'm not sure whether…
Sheffiled
  • 131
  • 12
6
votes
0 answers

Why an array is undefined in state React Redux toolkit

when trying to console.log a piece of (an array) managed with @reduxjs/toolkit it is always either undefined or proxy. when using import { original } from "immer"; and console.log(original(state.theArrayImTryingToLog)); I simply get: undefined. when…
oded ivry
  • 81
  • 4
6
votes
0 answers

Redux-Toolkit and React Hooks - Store change does not trigger re-render

I am trying to pre-populate a form with information from the database whenever the URL contains a query parameter with an ID. I am unable to make the site trigger a re-render when the information is fetched from the database. The relevant code in…
5
votes
2 answers

How to properly hydrate Redux state in NextJS on page refresh?

The problem I'm having is hydrating the user data from local storage on app reload/page refresh. In my project I am using NextJS for frontend, and for support libraries I am using redux-toolkit for redux management across the application and…
Lazar
  • 396
  • 2
  • 11
5
votes
1 answer

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
  • 307
  • 5
  • 14
1
2 3
35 36