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
191
votes
9 answers

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 userState(state = initialUserState, action) { …
coderzzz18
  • 2,535
  • 5
  • 16
  • 23
183
votes
3 answers

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 parts of this application. We decided that we need…
Artem Arkhipov
  • 7,025
  • 5
  • 30
  • 52
178
votes
10 answers

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 able to develop it where I need to hide the…
user6015171
172
votes
5 answers

What is the best way to redirect a page using React Router?

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.push("/path"); Using…
Liutong Chen
  • 2,915
  • 5
  • 22
  • 29
169
votes
17 answers

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 "classnames"; import CheckCircleIcon from…
Slim
  • 5,527
  • 13
  • 45
  • 81
168
votes
7 answers

Difference between component and container in react redux

What is the difference between component and container in react redux?
Stanislav Mayorov
  • 4,298
  • 5
  • 21
  • 44
164
votes
13 answers

'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 indicating that dispatch is not a function when I try to…
condad
  • 1,765
  • 2
  • 12
  • 9
162
votes
13 answers

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 detected in the state, in the path:…
Hazy
  • 1,766
  • 2
  • 8
  • 12
160
votes
3 answers

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);
Adam Tal
  • 5,911
  • 4
  • 29
  • 49
154
votes
2 answers

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 callback after the action has been propagated as…
ps-aux
  • 11,627
  • 25
  • 81
  • 128
154
votes
12 answers

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 { name: "some name", subtitle: "some subtitle", …
Ilja
  • 44,142
  • 92
  • 275
  • 498
153
votes
15 answers

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. export const mapCopy = (object, callback) => { …
Guy
  • 12,488
  • 16
  • 79
  • 119
150
votes
7 answers

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 appropriate sites based on the current user. The…
David
  • 10,418
  • 17
  • 72
  • 122
149
votes
6 answers

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 similar job that handles side effects but without…
147
votes
6 answers

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: In order to properly initialize the Redux Store…
Jamie S
  • 2,029
  • 2
  • 13
  • 19