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
270
votes
5 answers

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 event and will fill the dialog reducer in order…
carlesba
  • 3,106
  • 3
  • 17
  • 16
269
votes
7 answers

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 know where to place the ontimeupdate…
klanm
  • 3,168
  • 3
  • 19
  • 22
265
votes
10 answers

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 will be an object derived from state (as it lives in…
Pablo Barría Urenda
  • 5,703
  • 5
  • 20
  • 32
252
votes
25 answers

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 the loading screen as a React component, it will…
Thanh Nguyen
  • 5,174
  • 11
  • 43
  • 74
248
votes
7 answers

What could be the downsides of using Redux instead of Flux

I just recently discovered Redux. It all looks good. Are there any downsides, gotcha or compromises of using Redux over Flux? Thanks
Ivan Wang
  • 8,306
  • 14
  • 44
  • 56
237
votes
4 answers

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 (dispatch) { …
Sinan Samet
  • 6,432
  • 12
  • 50
  • 93
237
votes
2 answers

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) => { return { key: state.a.b }; }) While the…
Salman
  • 9,299
  • 6
  • 40
  • 73
215
votes
9 answers

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?
Marco de Jongh
  • 5,270
  • 3
  • 17
  • 29
214
votes
12 answers

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://swapi.co/api/vehicles/${id}/`) …
Vlady Veselinov
  • 4,678
  • 5
  • 23
  • 49
206
votes
7 answers

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 reducer. Also as I understand Redux application…
Pavel Teterin
  • 2,091
  • 3
  • 13
  • 9
204
votes
2 answers

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: true }); await Auth.sendEmailVerification(); …
Ilja
  • 44,142
  • 92
  • 275
  • 498
201
votes
11 answers

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 grid = (props) => { console.log(props); let…
Aftab Naveed
  • 3,652
  • 3
  • 26
  • 40
196
votes
17 answers

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 something like this without having to mutate the…
Vincent Taing
  • 3,283
  • 2
  • 18
  • 24
195
votes
3 answers

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 == action.payload); deleteInterests.splice(index,…
Josh
  • 2,430
  • 4
  • 18
  • 30
192
votes
9 answers

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 how I'm exporting combineReducers: import {…
Andrew
  • 3,839
  • 10
  • 29
  • 42