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
1124
votes
8 answers

Why use Redux over Facebook Flux?

I've read this answer, reducing boilerplate, looked at few GitHub examples and even tried redux a little bit (todo apps). As I understand, official redux doc motivations provide pros comparing to traditional MVC architectures. BUT it doesn't…
VB_
  • 45,112
  • 42
  • 145
  • 293
1068
votes
14 answers

How to dispatch a Redux action with a timeout?

I have an action that updates the notification state of my application. Usually, this notification will be an error or info of some sort. I need to then dispatch another action after 5 seconds that will return the notification state to the initial…
Ilja
  • 44,142
  • 92
  • 275
  • 498
897
votes
13 answers

Why do we need middleware for async flow in Redux?

According to the docs, "Without middleware, Redux store only supports synchronous data flow". I don't understand why this is the case. Why can't the container component call the async API, and then dispatch the actions? For example, imagine a…
Stas Bichenko
  • 13,013
  • 8
  • 45
  • 83
631
votes
36 answers

How to reset the state of a Redux store?

I am using Redux for state management. How do I reset the store to its initial state? For example, let’s say I have two user accounts (u1 and u2). Imagine the following sequence of events: User u1 logs into the app and does something, so we cache…
xyz
  • 6,315
  • 3
  • 12
  • 6
576
votes
11 answers

Pros/cons of using redux-saga with ES6 generators vs redux-thunk with ES2017 async/await

There is a lot of talk about the latest kid in redux town right now, redux-saga/redux-saga. It uses generator functions for listening to/dispatching actions. Before I wrap my head around it, I would like to know the pros/cons of using redux-saga…
hampusohlsson
  • 10,109
  • 5
  • 33
  • 50
425
votes
6 answers

What is mapDispatchToProps?

I was reading the documentation for the Redux library and it has this example: In addition to reading the state, container components can dispatch actions. In a similar fashion, you can define a function called mapDispatchToProps() that receives…
Code Whisperer
  • 22,959
  • 20
  • 67
  • 85
397
votes
8 answers

Trace why a React component is re-rendering

Is there a systematic approach to debug what is causing a component to re-render in React? I put a simple console.log() to see how many time it renders, but am having trouble figuring out what is causing the component to render multiple times i.e (4…
jasan
  • 11,475
  • 22
  • 57
  • 97
391
votes
8 answers

When to use ES6 class based React components vs. functional ES6 React components?

After spending some time learning React I understand the difference between the two main paradigms of creating components. My question is when should I use which one and why? What are the benefits/tradeoffs of one over the other? ES6…
omarjmh
  • 13,632
  • 6
  • 34
  • 42
371
votes
8 answers

Accessing Redux state in an action creator?

Say I have the following: export const SOME_ACTION = 'SOME_ACTION'; export function someAction() { return { type: SOME_ACTION, } } And in that action creator, I want to access the global store state (all reducers). Is it better to do…
ffxsam
  • 26,428
  • 32
  • 94
  • 144
318
votes
12 answers

What is the best way to access redux store outside a react component?

@connect works great when I'm trying to access the store within a react component. But how should I access it in some other bit of code. For eg: let's say I want to use an authorization token for creating my axios instance that can be used globally…
Subodh Pareek
  • 3,907
  • 2
  • 11
  • 9
311
votes
5 answers

React Context vs React Redux, when should I use each one?

React 16.3.0 was released and the Context API is not an experimental feature anymore. Dan Abramov (the creator of Redux) wrote a good comment here about this, but it was 2 years when Context was still an Experimental feature. My question is, in your…
Alfrex92
  • 6,278
  • 9
  • 31
  • 51
310
votes
32 answers

'TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type undefined'

I'm working on a project in React and ran into a problem that has me stumped. Whenever I run yarn start I get this error: TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type undefined I have no idea why this…
303
votes
19 answers

Cannot update a component while rendering a different component warning

I am getting this warning in react: index.js:1 Warning: Cannot update a component (`ConnectFunction`) while rendering a different component (`Register`). To locate the bad setState() call inside `Register` I went to the locations indicated in…
Tamjid
  • 4,326
  • 4
  • 23
  • 46
302
votes
9 answers

Attach Authorization header for all axios requests

I have a react/redux application that fetches a token from an api server. After the user authenticates I'd like to make all axios requests have that token as an Authorization header without having to manually attach it to every request in the…
awwester
  • 9,623
  • 13
  • 45
  • 72
279
votes
7 answers

Redux - multiple stores, why not?

As a note: I've read the docs for Redux (Baobab, too), and I've done a fair share of Googling & testing. Why is it so strongly suggested that a Redux app have only one store? I understand the pros/cons of a single-store setup vs a multiple store…
Sebastien Daniel
  • 4,649
  • 3
  • 19
  • 34
1
2 3
99 100