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
1
vote
1 answer

How to build a Redux + ReduxToolkit store with a repeating nested slice?

Let's say my state looks something like this (taken from https://redux.js.org/usage/structuring-reducers/normalizing-state-shape): { posts : { byId : { "post1" : { id : "post1", author :…
AlonF
  • 11
  • 1
1
vote
1 answer

Redux Toolkit createEntityAdapter: how can i get current state of adapter?

I am seeing TS type errors trying to pass state into an entityAdapter CRUD function live sandbox (with erroneous line commented out): https://codesandbox.io/s/createentityadapter-demo-5rvl4 create books adapater const booksAdapter =…
Laurence Fass
  • 1,614
  • 3
  • 21
  • 43
1
vote
1 answer

How to set initialState with createAEntityAdapter

I have constant data and i want to set initial state. I am using createEntityAdapter. How can i define initialState ? import { createSlice, createEntityAdapter } from "@reduxjs/toolkit"; export const cardAdaptor = createEntityAdapter(); const…
bizimsiti
  • 78
  • 6
1
vote
1 answer

Do selectors cause re-rendering on unrelated components in Redux toolkit?

I am diving into Redux toolkit and made a simple project to understand its concepts better. function App() { //.. return( // uses submittedUserSelector // uses selectedUserSelector ); } The basic idea is that…
juanjo12x
  • 183
  • 1
  • 3
  • 15
1
vote
2 answers

How to add a number to an existing array in redux react

I want to update Array initialState const initialState = { name:'a', arrNames:[1,2,3,4]} reducer const userRuducer = createReducer(initialState,(builder)=>{ builder.addCase('UPDATE_ARRAY',(state,action)=>{ // how to add ' 12' in…
asif kaif
  • 159
  • 12
1
vote
1 answer

React/Redux/Redux-saga rendering only the last API value

I am new to react redux toolkit and redux-saga and have encountered an error where it only renders the last api call value from moviedb api. Also when I console log the state from useSelector, it renders multiple values. Here's my…
1
vote
1 answer

reducer function error when using redux-toolkit

I got the following error when I was using redux: TypeError: react__WEBPACK_IMPORTED_MODULE_2___default(...) is not a function How do I solve this? I have added the code below. dispatch() is being called in the component below import authAction…
Yoshiminea
  • 15
  • 6
1
vote
2 answers

Redux won't update state

I'm using Redux for the first time, and my demo app won't update its default state. I've also tried using useEffect to subscribe to my state, but that still does not log the updated state. actions.ts import { createAction } from…
Raven
  • 529
  • 7
  • 27
1
vote
1 answer

Redux Toolkit RTK Query call endpoints in queryFn

I'm using an endpoint with queryFn instead of query to perform many requests. Is there a way to calling endpoints that are already define instead of using fetchWithBQ ? Here is an example. export const api = createApi({ reducerPath: "api", …
droyer
  • 71
  • 2
  • 7
1
vote
1 answer

React-redux dispatch action onclick using hooks and redux toolkit

Fairly new to redux, react-redux, and redux toolkit, but not new to React, though I am shaky on hooks. I am attempting to dispatch an action from the click of a button, which will update the store with the clicked button's value. I have searched for…
AliciaW
  • 15
  • 6
1
vote
1 answer

redux toolkit createAsyncThunk typescript errors

I'm trying to call an API endpoint using @reduxjs/toolkit and typescript. I've followed the example here, without success https://redux-toolkit.js.org/api/createAsyncThunk I'm stuck on some typescript errors, what am I doing wrong? 1°error: when I…
user2298581
  • 532
  • 3
  • 11
  • 37
1
vote
1 answer

getting a 'No reducer provided for key "auth"' error using configurestore in redux-toolkit

Getting the 'No reducer provided for key "auth"' error, think it's to do with how I'm passing it to the store from the slice. Everything is working fine apart from the No reducer error. Should I use a rootReducer ? Looked through the documentation…
Ricksta
  • 27
  • 1
  • 4
1
vote
1 answer

redux-toolkit-> 'A non-serializable value was detected in an action' while converting working code over to redux-toolkit

I am trying to switch an app I am building over to use Redux Toolkit, and have noticed this error coming up 'A non-serializable value was detected in an action, in the path: type. Value: ', Also getting undefined in the redux devtool instead of…
Ricksta
  • 27
  • 1
  • 4
1
vote
7 answers

How to purge any persisted state using react tool kit with redux-persist

In the official documentation it says to add an extra reducer in order to purge the state of the current slice, however there is no a clear example everywhere import { PURGE } from "redux-persist"; extraReducers: (builder) => { …
Chris David
  • 31
  • 1
  • 4
1
vote
2 answers

Redux-Toolkit createAsyncThunk function doesnt return error

I am using Redux Toolkit's createAsyncThunk function for api request. When turned off network, following function returns action.payload="Network Error" and status = "success". Status should be "error". But it returns success. Any suggestions to fix…
hakan-dev
  • 31
  • 1
  • 8