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
0 answers

Redux-Saga is getting stucked after the yield call when promise is resolved by the axios ,

import { call ,put} from "redux-saga/effects"; import { setLoading } from "../../component/loader/loaderSlice"; import { handleLogin } from "../../services/loginService"; export function* doUserLogin({payload}){ const {userName,password}…
secret
  • 237
  • 2
  • 6
1
vote
1 answer

cannot update initalState in redux-toolkit with createAsyncThunk

Im trying to set and update initialState in redux toolkit after fetch operation pageSlice.js import { createSlice, createAsyncThunk } from "@reduxjs/toolkit"; import { deletePage, getPages, savePage, updatePage } from…
Vaishnav
  • 11
  • 1
1
vote
1 answer

redux-toolkit: Where to dispatch an action?

I'm trying to build a tesla clone website using react and redux-toolkit I have 3 different components Components: (Header, Home, Details) whenever I click on a model from the navigation I want to switch Details Component and show the specific car…
Fuhad Hasan
  • 53
  • 1
  • 2
  • 9
1
vote
1 answer

How can i enforce DRY when using Redux Toolkit asyncThunkCreator

i have a RTK related question, as i want to be able to cancel any request made i find myself repeating code in most of my action creators created with createAsyncThunk I would like to make a wrapper of sort but i am having problem typescripting it,…
Hammersholt
  • 75
  • 11
1
vote
1 answer

how to implement createAsyncThunk

I am trying to move the asynchronous Axios POST request logic from my registration component into a thunk via the createAsyncThunk. Here is my registration component import React from 'react'; import axios from 'axios'; import { useDispatch,…
Cosmel
  • 45
  • 9
1
vote
1 answer

How to implement Redux Slicer

Hello I am working on a Registration app, I was using useState hook to set the user information and this way it works fine import React, { useState } from 'react'; import axios from 'axios'; const Registration = (props) => { const [user,…
Cosmel
  • 45
  • 9
1
vote
1 answer

How to refactor duplicate code in Redux-Toolkit, createAsyncThunk and extraReducers?

For the first time, I am using Redux in my React project. The code here I have added is for cookie-based authentication. I am worried that everything is here is in the correct format. It seems lots of duplicate code here. Especially for pending and…
1
vote
0 answers

How to pass in redux toolkit state as function argument to be used for another function

I'm writing app where logic is stored in redux toolkit. Can You please tell me how can I pass data from getPostSuccess.state.post as argument of the function onGetPostHandler so I can use it in postTitle and postBody export const postSlice =…
marcinb1986
  • 708
  • 1
  • 11
  • 30
1
vote
1 answer

react native redux toolkit filter not working

why is my filter function not working ? ShipperSlice.js import { createSlice } from "@reduxjs/toolkit"; import { current } from '@reduxjs/toolkit'; const createProductShipper = createSlice({ name: "createProductShipper", initialState: { …
localdata01
  • 587
  • 7
  • 17
1
vote
1 answer

Immer - An immer producer returned a new value *and* modified react native

toggleAllClassList: (state, action) => { let allClassListLocal = state.classList || []; var isAllSelected = false; allClassListLocal.forEach(function (item: any) { item.LstParentInfo.forEach((subItem: any) =>…
mohsinali1317
  • 4,255
  • 9
  • 46
  • 85
1
vote
0 answers

Using Redux with Next.js without installing other third party libraries

I am developing a Next.js app where I use Redux Toolkit. At the moment I am using redux in a dumb way, so that I almost don't need it at all: every time the app reloads I lose all I had in my redux store and I reinitialize the store with data I take…
anotherOne
  • 1,513
  • 11
  • 20
1
vote
0 answers

How to find the non-serializable value in the redux store?

I encounter the following warning from redux toolkit. However the error is not specificying where the non-seralizable actually is in my state. My raw state from the redux dev tools looks like this. The warning occurs immededtly after starting the…
dan_boy
  • 1,735
  • 4
  • 19
  • 50
1
vote
2 answers

React Reduxjs toolkit is not reading state in useSelector, using Typescript. Is shows me an error that loggedIn is not a boolean

I'm passing to the component a state from store.tsx file and it shows me an error. Error is in const loggedIn that state.loggedIn.loggedIn is not a boolean. Below is the code for component import React from "react"; import { StyledNavBar,…
marcinb1986
  • 708
  • 1
  • 11
  • 30
1
vote
1 answer

How to access the error object when the Promise of a createAsyncThunk dispatch is rejected?

I want to handle the cases when a promise is fulfilled and when it is rejected separately. I saw that with my code the first function passed to then is always called, even when the promise is rejected. I have code like this with the issue explained…
silviubogan
  • 3,343
  • 3
  • 31
  • 57
1
vote
1 answer

Typescript error when dispatching action created by createAsyncThunk from saga

Example: /* actions.ts */ export const getTeacherChats = createAsyncThunk( 'messenger/chats', async (params, thunkAPI) => { const response = await messenger.getTeacherChats() if (response.ok) { return response.data } return…