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

React/Redux can’t access properties of object in an array

Working with react and redux toolkit. I have a form which allows users to create items. The post request must adhere to the relevant mongoose item schema. Form entries relate to the following stateful values: const [name, setName] = useState(''); …
1
vote
1 answer

(React) useDispatch TypeError: Object(...) is not a function handleChange

I'm doing a simple React app where any user introduce a text in the input text, and automatedly it will update the state in the store. It is very simple practice of React but I'm getting very struggle and frustrated with this error because I tried…
1
vote
1 answer

Difference between redux nested selector and non-nested selector

I have seen many example codes of redux and found that we use useSelector in mostly 2 ways. nested import React from 'react' import { useSelector } from 'react-redux' export const UserComponent = () => { const name =…
Vikram Ray
  • 960
  • 2
  • 10
  • 17
1
vote
2 answers

Why my products are empty with this function?

In the console it shows me a warning: The entity passed to the selectId implementation returned undefined. You should probably provide your own selectId implementation. The entity that was passed: (2) [{…}, {…}] The selectId implementation: item =>…
João Marcos
  • 63
  • 1
  • 6
1
vote
2 answers

The type returned by `createAction` isn't maintained through `ofType`

I'm making an app that lets the user select snacks from a list of available snacks. The snacks are loaded from an external API. I'm using redux-observable to "listen" for actions and then dispatch the appropriate API requests. Here's my existing…
RobertAKARobin
  • 3,933
  • 3
  • 24
  • 46
1
vote
2 answers

Nested Data Normalization createEntityAdapter

I am trying to normalize an array of data of the following structure Array. using the createEntityAdapter. After fetching the data with a createAsyncThunk and returning them, I did set them in the extraReducers like…
Georgios
  • 861
  • 2
  • 12
  • 30
1
vote
1 answer

How to use preloadedState in Redux Toolkit

I want to save changes in state even if the page is reloaded. I've checked my oldState const in console.log and it works. But my ui doesn't show state from local storage. How can I use my oldState const in preloadedState? const saveState = state =>…
1
vote
1 answer

Param Redux data not populating in store correctly

I am having trouble with my Redux store in cases where I am passing params through a Thunk action. In cases were there is no param, my store is populating correctly. The action is completing successfully and I can see that the data has been returned…
James Gee
  • 129
  • 1
  • 3
  • 24
1
vote
1 answer

Passing dispatch to typed CreatedAsyncThunk via thunkApi config parameter is causing error

I've created a typed AsyncThunk following the instructions from the redux-toolkit docs. It consists in a method to get data from an API, without any filters and return as a typed array. The code in this AsyncThunk also calls a function to show the…
juliano.net
  • 7,982
  • 13
  • 70
  • 164
1
vote
0 answers

Testing React + Redux Toolkit with Enzyme

does anyone have any ideas how I can fix the following error? could not find react-redux context value; please ensure the component is wrapped in a Provider Here's the component part that fails: const Main = () => { const toggleMoreOptions =…
1
vote
1 answer

Same action triggering in multiple slices Redux-Toolkit

I seem to be missing something. I have the following setup: projectSlice.js import { createSlice } from '@reduxjs/toolkit' const projectSlice = createSlice({ name: 'projects', initialState: { list: { 'project-1': { id, …
1
vote
1 answer

Redux Toolkit with TypeScript - typing RootState with an SSR framework like Gatsby

The the official Redux Toolkit docs recommend typing the RootState as follows: import { configureStore } from '@reduxjs/toolkit' // ... export const store = configureStore({ reducer: { posts: postsReducer, comments: commentsReducer, …
fullStackChris
  • 1,300
  • 1
  • 12
  • 24
1
vote
1 answer

How can I set up redux-observable with redux-toolkit?

I am unable to set up redux-observable in my current project. So far, I've been using redux-toolkit for everything redux related, but now when I try to add redux-observable I get this error: This is how I set it up: function logEpic(actions) { …
bncpr
  • 56
  • 5
1
vote
1 answer

redux-toolkit sharing state between slice reducer

I'm building an app where a "slice reducer" needs to access state of another "slice reducer". The redux docs talks about using a custom combine reducer in order to pass in the root state to the reducer - Beyond combineReducers Thus far, I have this…
zootpera
  • 11
  • 1
1
vote
0 answers

Im building a twitter clone with React, Redux and Firebase. I want to set up a snapshot listener to my userProfile component right when the app loads

Right now I'm setting up a listener every time the component mounts (with a useEffect). However, on the firebase docs it says, Ideally, your application should set up all the required snapshot listeners soon after opening a connection to Firestore.…