Questions tagged [redux]

Redux is a pattern and library for managing JavaScript application state, using events called "actions". It serves as a centralized store for state that is needed across your entire application, with rules ensuring that the state can only be updated in a predictable fashion. Redux make it easier to understand when, where, why, and how the state in your application is being updated, and how your application logic will behave when those changes occur.

Redux is a pattern and library for managing and updating application state, using events called "actions". It serves as a centralized store for state that needs to be used across your entire application, with rules ensuring that the state can only be updated in a predictable fashion. It is inspired by the architecture.

The patterns and tools provided by Redux make it easier to understand when, where, why, and how the state in your application is being updated, and how your application logic will behave when those changes occur. Redux guides you towards writing code that is predictable and testable, which helps give you confidence that your application will work as expected.

Redux Toolkit 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


Useful Links

Related tags

35457 questions
75
votes
15 answers

React-Redux useSelector typescript type for state

I'm using the useSelector(state => state.SLICE_NAME) hook from React-Redux however I'm having difficulty defining the state parameter. It is set by default as unknown so I get an error when I try to return state.SLICE_NAME (Error: Object is of type…
Jake
  • 3,865
  • 5
  • 25
  • 58
75
votes
4 answers

When to use native React.useReducer Hook and how it differentiate from Redux

So, Hooks are available from React 16.8. From their documentation, Hooks come as a replacer of state in functional components. The basic hooks are: useState, useEffect, useContext, but there are also some additional hooks, one of them being…
Relu Mesaros
  • 4,952
  • 4
  • 25
  • 33
74
votes
1 answer

Next.js: Reduce data fetching and share data between pages

I'm looking for solutions for better data fetching in a Next.js app. In this question I'm not just looking for a solution, I'm looking for multiple options so we can look at the pros and cons. The problem I have Right now I have a few pages that all…
eivindml
  • 2,197
  • 7
  • 36
  • 68
71
votes
5 answers

Nested redux reducers

Is it possible to combine reducers that are nested with the following structure: import 'user' from ... import 'organisation' from ... import 'auth' from ... // ... export default combineReducers({ auth: { combineReducers({ user, …
AndrewMcLagan
  • 13,459
  • 23
  • 91
  • 158
70
votes
8 answers

How to catch and handle error response 422 with Redux/Axios?

I have an action making a POST request to the server in order to update a user's password, but I'm unable to handle the error in the chained catch block. return axios({ method: 'post', data: { password: currentPassword, new_password:…
Phillip Boateng
  • 1,111
  • 1
  • 12
  • 16
68
votes
16 answers

React Warning: Cannot update a component from inside the function body of a different component

I am using Redux with Class Components in React. Having the below two states in Redux store. { spinner: false, refresh: false } In Parent Components, I have a dispatch function to change this states. class App extends React.Component { …
Smith Dwayne
  • 2,675
  • 8
  • 46
  • 75
68
votes
2 answers

How to choose the Redux state shape for an app with list/detail views and pagination?

Imagine I have a number of entries(say, users) in my database. I also have two routes, one for list, other for detail(where you can edit the entry). Now I'm struggling with how to approach the data structure. I'm thinking of two approaches and a…
fxck
  • 4,898
  • 8
  • 56
  • 94
67
votes
20 answers

Element type is invalid: expected a string (for built-in components) or a class/function

import React from 'react'; import ReactDOM from 'react-dom'; import Map from './components/map/container/map'; import App from './App'; import './index.css'; import shell from './shared/utility/shell'; import { render } from 'react-dom' import {…
Varun thadhani
  • 691
  • 1
  • 5
  • 7
67
votes
5 answers

How to make AJAX request in redux

For all I know, I have to write request in action create. How to use a promise in action for submitting a request? I am getting data in action. Then new state is created in reducer. Bind action and reducer in connect. But I don't know how to use…
Disa Skolzin
  • 691
  • 1
  • 5
  • 4
66
votes
1 answer

Understanding compose functions in redux

I was trying to create a store in redux for which I am currently using following syntax:- const middlewares = [ thunk, logger ] const wlStore = createStore( rootReducer, initialState compose(applyMiddleware(...middlewares)) ) The above…
Harkirat Saluja
  • 7,768
  • 5
  • 47
  • 73
66
votes
5 answers

I am using Redux. Should I manage controlled input state in the Redux store or use setState at the component level?

I have been trying to figure out the best way to manage my react forms. I have tried to use the onChange to fire an action and update my redux store with my form data. I have also tried creating local state and when my form gets submitted I trigger…
gkkirsch
  • 2,006
  • 2
  • 16
  • 14
65
votes
5 answers

Checking for Undefined In React

I have a scenario where I'm passing data from a reducer into my react state. data: { "id": 1, "title": "Test", "content": { "body": "sdfsdf" "image": "http://example.com" } } Using componentWillRecieveProps, this…
lost9123193
  • 10,460
  • 26
  • 73
  • 113
65
votes
4 answers

how to set initial state in redux

I'm trying to figure out how to set an initial state for a store in redux. I'm using https://github.com/reactjs/redux/blob/master/examples/todos-with-undo/reducers/index.js as an example. I tried to modify the code such that the todos had a value…
Saad
  • 26,316
  • 15
  • 48
  • 69
63
votes
5 answers

Transition to another route on successful async redux action

I have a pretty simple set of react components: container that hooks into redux and handles the actions, store subscriptions, etc list which displays a list of my items new which is a form to add a new item to the list I have some react-router…
Clarkie
  • 7,490
  • 9
  • 39
  • 53
62
votes
6 answers

What is difference between reducers and extrareducers in redux toolkit?

I have learned about redux toolkit for 2 months, and in createSlice have reducers and extrareducers, I know they use to change state from dispatch but I don't know the difference, Where should we use them?
kalipts
  • 1,097
  • 1
  • 9
  • 21