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
29
votes
6 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
29
votes
2 answers

Redux ToolKit: is it possible to dispatch other actions from the same slice in one action created by createAsyncThunk

I am using redux-toolkit with createAsyncThunk to handle async requests. I have two kinds of async operations: get the data from the API server update the data on the API server export const updateData = createAsyncThunk('data/update', async…
Joji
  • 4,703
  • 7
  • 41
  • 86
28
votes
5 answers

How to reset state of Redux Store when using configureStore from @reduxjs/toolkit?

I have seen solutions for clearing/resetting the store after logout but did not understand how to implement the same functionality for the following way of setting up the redux store. Store.js: import { configureStore, getDefaultMiddleware } from…
sunil b
  • 685
  • 2
  • 8
  • 21
27
votes
4 answers

Redux Toolkit: state showing as Proxy / undefined within reducer

Solved it, thanks! - For anyone interested, I was trying to access state.tasks.data within the reducer however due to scope, I could access it via state.data as I was already within the tasks slice. Edit: My issue with mutated state error is now…
Joe
  • 918
  • 1
  • 8
  • 17
24
votes
3 answers

Handling errors with redux-toolkit

The information about the error in my case sits deeply in the response, and I'm trying to move my project to redux-toolkit. This is how it used to be: catch(e) { let warning switch (e.response.data.error.message) { ... } } The problem is…
22
votes
2 answers

Approaches for using RTK-Query hooks inside functions?

I've successfully written my application using Axios to fetch content. As of now, it's set up to fetch content when certain events happen (like the submit button has been clicked.) However, I'm experimenting with Redux's RTK-Query solution. This…
kevin
  • 2,707
  • 4
  • 26
  • 58
22
votes
3 answers

How to fix circular dependencies of slices with the RootState?

I recently started using redux-toolkit and started writing my reducers using the createSlice following their docs. One reducer, let's call it reducerA, imports customAsyncFunction to handle its callback, this function is created through…
Rigotti
  • 2,766
  • 23
  • 28
21
votes
1 answer

Redux Toolkit RTK Query sending query parameters

How do you pass query parameters to the api using Redux Toolkit RTK Query? import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'; const baseUrl = 'xxxxxxx'; export const postsApi = createApi({ reducerPath: 'posts', …
Matt Herbstritt
  • 4,754
  • 4
  • 25
  • 31
21
votes
1 answer

Redux Toolkit: Dispatch an action from an extraReducers listener?

I want to know if it's possible (or a good practice) to call dispatch(someDumbAction()) from an extraReducer. For example, I have a setData() action in reducers object from createSlice. I want to call setData() directly in my component. But I want…
sevenlops
  • 456
  • 1
  • 4
  • 18
21
votes
5 answers

How can I get the state value in the reducer of createSlice?

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…
DevLoverUmar
  • 11,809
  • 11
  • 68
  • 98
19
votes
3 answers

Redux Toolkit - Argument of type 'AsyncThunkAction<>' is not assignable to parameter of type 'AnyAction'

I'm moving my React / Redux application to Redux toolkit, and am following instructions given here. My custom selector and dispatch, as per the documentation. import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux"; import {…
kvnam
  • 1,285
  • 2
  • 19
  • 34
19
votes
3 answers

RTK Query createApi results in: "Property '....' does not exist on type 'Api"

The following code uses RTK query to create a Redux Hook: export const specialtiesApi = createApi({ reducerPath: 'specialtiesApi', baseQuery: fetchBaseQuery({ baseUrl: 'https://someplace.com/' }), endpoints: (builder) => ({ …
alcfeoh
  • 2,147
  • 1
  • 18
  • 33
18
votes
1 answer

RTK Query get state from another slice using getState()

I just started on redux yesterday and after reading up on the different libraries, I decided to use the slice route from RTK. For my async, instead of using createAsyncThunk, I decided to use RTK query and I have a question on the right way to…
LuxuryWaffles
  • 1,518
  • 4
  • 27
  • 50
17
votes
3 answers

Dispatch action on the createAsyncThunk?

I hava a thunk action was created by createAsyncThunk. I want to dispatch an action before call api to update state. I don't want use action getProducts.pending because I want dispatch actionLoading() for other thunk actions. How I can i do it?…
queeng
  • 173
  • 1
  • 1
  • 6
17
votes
4 answers

Local storage using redux toolkit

I would like to keep my isAuthenticated state in local storage, so after refreshing the page, the user will be logged in. I tried straightforward, to set it ti true/false in localStorage and to set initial value of my state in redux to this value,…
Ania Kowalska
  • 415
  • 1
  • 4
  • 12