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
35,456
questions
1124
votes
8
answers
282k
views
Why use Redux over Facebook Flux? [closed]
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 ...
- 45.4k
1079
votes
14
answers
527k
views
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 ...
- 45.7k
904
votes
13
answers
223k
views
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 ...
- 13.2k
647
votes
35
answers
555k
views
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 ...
- 6,475
578
votes
11
answers
136k
views
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 ...
- 10.2k
463
votes
8
answers
230k
views
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 ...
- 12.5k
427
votes
6
answers
295k
views
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 ...
- 23.4k
402
votes
7
answers
135k
views
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/...
- 13.9k
371
votes
8
answers
225k
views
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 ...
- 27.2k
362
votes
24
answers
553k
views
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 `...
- 5,176
326
votes
13
answers
241k
views
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 ...
- 4,027
324
votes
26
answers
420k
views
'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 ...
- 3,351
323
votes
5
answers
134k
views
React Context vs React Redux, when should I use each one? [closed]
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 ...
- 6,648
320
votes
9
answers
486k
views
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 ...
- 10k
287
votes
7
answers
122k
views
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 ...
- 4,749
275
votes
7
answers
202k
views
Can I dispatch an action in reducer?
is it possible to dispatch an action in a reducer itself? I have a progressbar and an audio element. The goal is to update the progressbar when the time gets updated in the audio element. But I don't ...
- 3,228
272
votes
5
answers
148k
views
How can I display a modal dialog in Redux that performs asynchronous actions?
I'm building an app that needs to show a confirm dialog in some situations.
Let's say I want to remove something, then I'll dispatch an action like deleteSomething(id) so some reducer will catch that ...
- 3,136
266
votes
10
answers
208k
views
Understanding React-Redux and mapStateToProps()
I'm trying to understand the connect method of react-redux, and the functions it takes as parameters. In particular mapStateToProps().
The way I understand it, the return value of mapStateToProps ...
- 5,753
255
votes
4
answers
450k
views
Axios get in url works but with second parameter as object it doesn't
I'm trying to send GET request as second parameter but it doesn't work while it does as url.
This works, $_GET['naam'] returns test:
export function saveScore(naam, score) {
return function (...
- 6,682
254
votes
25
answers
622k
views
React - Display loading screen while DOM is rendering?
This is an example from the Google AdSense application page. The loading screen is displayed before the main page is shown.
I am not sure how to achieve the same effect with React because if I render ...
- 5,284
250
votes
14
answers
493k
views
Fetch: reject promise and catch the error if status is not OK?
Here's what I have going:
import 'whatwg-fetch';
function fetchVehicle(id) {
return dispatch => {
return dispatch({
type: 'FETCH_VEHICLE',
payload: fetch(`http:...
- 5,222
249
votes
7
answers
39k
views
What could be the downsides of using Redux instead of Flux [closed]
I just recently discovered Redux. It all looks good. Are there any downsides, gotcha or compromises of using Redux over Flux? Thanks
- 8,406
243
votes
3
answers
161k
views
eslint: no-case-declaration - unexpected lexical declaration in case block
What is the better way to update state in this context inside a reducer?
case DELETE_INTEREST:
let deleteInterests = state.user.interests;
let index = deleteInterests.findIndex(i => i == ...
- 2,910
237
votes
2
answers
68k
views
What's the '@' (at symbol) in the Redux @connect decorator?
I am learning Redux with React and stumbled upon this code. I am not sure if it is Redux specific or not, but I have seen the following code snippet in one of the examples.
@connect((state) => {
...
- 9,377
218
votes
9
answers
147k
views
Where to write to localStorage in a Redux app?
I want to persist some parts of my state tree to the localStorage. What is the appropriate place to do so? Reducer or action?
- 5,418
210
votes
2
answers
363k
views
Await is a reserved word error inside async function
I am struggling to figure out the issue with the following syntax:
export const sendVerificationEmail = async () =>
(dispatch) => {
try {
dispatch({ type: EMAIL_FETCHING, payload: ...
- 45.7k
210
votes
7
answers
76k
views
How to dynamically load reducers for code splitting in a Redux application?
I'm going migrate to Redux.
My application consists of a lot of parts (pages, components) so I want to create many reducers. Redux examples show that I should use combineReducers() to generate one ...
- 2,131
206
votes
11
answers
209k
views
ReactJS lifecycle method inside a function Component
Instead of writing my components inside a class, I'd like to use the function syntax.
How do I override componentDidMount, componentWillMount inside function components?
Is it even possible?
const ...
- 3,829
205
votes
16
answers
316k
views
Getting an error "A non-serializable value was detected in the state" when using redux toolkit - but NOT with normal redux
I am trying to switch an app I am building over to use Redux Toolkit, and have noticed this error coming up as soon as I switched over to configureStore from createStore:
A non-serializable value was ...
- 2,196
199
votes
17
answers
124k
views
Remove a property in an object immutably
I am using Redux. In my reducer I'm trying to remove a property from an object like this:
const state = {
a: '1',
b: '2',
c: {
x: '42',
y: '43'
},
}
And I want to have ...
- 3,334
199
votes
9
answers
293k
views
Receiving "Attempted import error:" in react app
I am receiving the following error when trying to run my React app:
./src/components/App/App.js
Attempted import error: 'combineReducers'
is not exported from '../../store/reducers/'.
Here's ...
- 3,979
196
votes
10
answers
221k
views
How do I add an element to array in reducer of React native redux?
How do I add elements in my array arr[] of redux state in reducer?
I am doing this-
import {ADD_ITEM} from '../Actions/UserActions'
const initialUserState = {
arr:[]
}
export default function ...
- 2,625
196
votes
21
answers
538k
views
Uncaught Invariant Violation: Too many re-renders. React limits the number of renders to prevent an infinite loop
I'm trying to add a snackBar in order to display a message whenever a user signIn or not.
SnackBar.jsx:
import React from "react";
import PropTypes from "prop-types";
import classNames from "...
- 6,057
184
votes
4
answers
40k
views
What is an actual difference between redux and a state machine (e.g. xstate)?
I am working on investigation of one front-end application of medium complexity. At this moment it is written in pure javascript, it has a lot of different event-based messages connecting few main ...
- 7,355
179
votes
10
answers
184k
views
Invariant Violation: Could not find "store" in either the context or props of "Connect(SportsDatabase)"
Full code here: https://gist.github.com/js08/0ec3d70dfda76d7e9fb4
Hi,
I have an application where it shows different templates for desktop and mobile on basis of build environment.
I am successfully ...
user6015171
179
votes
5
answers
523k
views
What is the best way to redirect a page using React Router? [closed]
I am new to React Router and learn that there are so many ways to redirect a page:
Using browserHistory.push("/path")
import { browserHistory } from 'react-router';
//do something...
browserHistory....
- 3,383
170
votes
7
answers
103k
views
Difference between component and container in react redux
What is the difference between component and container in react redux?
- 4,392
165
votes
13
answers
194k
views
'dispatch' is not a function when argument to mapToDispatchToProps() in Redux
I am building an small application with redux, react-redux, & react. For some reason when using mapDispatchToProps function in tandem with connect (react-redux binding) I receive a TypeError ...
- 1,774
163
votes
3
answers
89k
views
How to get something from the state / store inside a redux-saga function?
How do I access the redux state inside a saga function?
Short answer:
import { select } from 'redux-saga/effects';
...
let data = yield select(stateSelectorFunction);
- 5,951
162
votes
15
answers
226k
views
Deep copy in ES6 using the spread syntax
I am trying to create a deep copy map method for my Redux project that will work with objects rather than arrays. I read that in Redux each state should not change anything in the previous states.
...
- 13.1k
160
votes
2
answers
85k
views
Is store.dispatch in Redux synchronous or asynchronous
I realize this is a basic question but I had no luck finding the answer elsewhere.
Is store.dispatch synchronous or asynchronous in Redux ?
In case it is asynchronous is there a possibility to add a ...
- 12k
160
votes
6
answers
118k
views
Is using Redux with Next.js an anti-pattern?
I'm building a Next.js app and it currently is using Redux. As I am building it I am wondering if the use of Redux is really necessary and if its use is actually an anti-pattern. Here is my reasoning:
...
- 2,169
158
votes
13
answers
185k
views
How to update single value inside specific array item in redux
I have an issue where re-rendering of state causes ui issues and was suggested to only update specific value inside my reducer to reduce amount of re-rendering on a page.
this is example of my state
...
- 45.7k
156
votes
21
answers
348k
views
Typescript complains Property does not exist on type 'JSX.IntrinsicElements' when using React.createClass?
I am using typescript to write redux application.
var item = React.createClass({
render: function() {
return (<div>hello world</div>)
}
});
export default class ItemList extends ...
- 9,633
156
votes
7
answers
337k
views
Re-render React component when prop changes
I'm trying to separate a presentational component from a container component. I have a SitesTable and a SitesTableContainer. The container is responsible for triggering redux actions to fetch the ...
- 10.6k
155
votes
4
answers
105k
views
What is the difference between Next.js and Create React App?
I'm trying to figure out the difference between Next.js and Create React App (CRA). I know both are there to make our life easier while developing our front-end applications using React.
After ...
- 13.4k
152
votes
26
answers
348k
views
React-Redux: Actions must be plain objects. Use custom middleware for async actions
Unhandled Rejection (Error): Actions must be plain objects. Use custom middleware for async actions.
I wanted to add comments with every posts. So when fetch posts are run I want to call fetch ...
- 1,523
150
votes
6
answers
44k
views
Why use Redux-Observable over Redux-Saga?
I have used Redux-Saga. Code written with it is easy to reason so far, except JS generator function is messing up my head from time to time. From my understanding, Redux-Observable can achieve the ...
- 8,406
146
votes
5
answers
90k
views
Why is my onClick being called on render? - React.js
I have a component that I have created:
class Create extends Component {
constructor(props) {
super(props);
}
render() {
var playlistDOM = this.renderPlaylists(this.props.playlists);
...
- 24.8k
144
votes
3
answers
197k
views
How can I persist redux state tree on refresh?
The first principle of Redux documentation is:
The state of your whole application is stored in an object tree within a single store.
And I actually thought that I understand all of the principles ...
- 1,955