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
7
votes
2 answers

How to overcome "A non-serializable value detection"

I'm implementing react app with redux-toolkit, and I get such errors when fetching data from firestore. A non-serializable value was detected in an action, in the path: payload.0.timestamps.registeredAt A non-serializable value was detected in an…
7
votes
1 answer

React.lazy not working in production mode

I have a react app running, and I wanted to add route based code-splitting using React.lazy to it. Currently my code is, import { PureComponent, cloneElement, Suspense, lazy } from 'react'; ... export const CartPage = lazy(() => import(/*…
Jay Ghosh
  • 674
  • 6
  • 24
7
votes
5 answers

React-hook-form field value get lost when i collapse, add or delete panel

I am using material ui ExpansionPanel. I am trying to add new panels from Add button click and remove panel from Remove button click, its working fine, problem is, when i expand, collapse, add or remove panels, form fields value get lost. I think it…
7
votes
2 answers

Does using React Hooks drastically reduce how code can be reused in React / Redux?

Let's say we have the old traditional way of React / Redux: (you don't need to expand the code if you are familiar with it:) import React from 'react'; import { connect } from 'react-redux'; function Count(props) { return (
nonopolarity
  • 146,324
  • 131
  • 460
  • 740
7
votes
3 answers

How do I change a Formik TextField value from the outside of the From?

On a module dialog, I want to change the value of input value (#quaggaIsbn). I tried document.getElementById("quaggaIsbn").value = result.codeResult.code but it wasn't reflected to the values the form sends to the server. How can I change the values…
Hiroaki Machida
  • 1,060
  • 2
  • 12
  • 23
7
votes
2 answers

React JS and Redux: useSelector() vs useStore()

I would like to know what is the difference between useSelector and UseStore. Are there any advantages on using one instead of the other? Thanks. useSelector const { pages } = useSelector((state: RootState) => { return { pages:…
ipegasus
  • 14,796
  • 9
  • 52
  • 76
7
votes
1 answer

How to test document.eventListener with Jest

I have event listener that will call a function that handle authentication. I want to test that if that function receives the wrong data, it will return a data and if not, will return another data. But I not understanding how to mock that function…
Laura Beatris
  • 1,782
  • 7
  • 29
  • 49
7
votes
2 answers

Load initialState dynamically with createSlice in Redux Toolkit

Is there a well-known pattern for injecting a payload of dynamic initial state into Redux-Toolkit's initialState object? That is, I would like to do this - import initialState from './initialState'; function generateSlice(payload = {}){ const…
nrako
  • 2,952
  • 17
  • 30
7
votes
2 answers

React dispatch a method in async call

How to dispatch the redux function in react async call. When I call the dispatch function dispatch(updatingcontact(), I'm getting error that dispatch is not defined. const UpdateContact = async (URL, method, type, address) =>…
Maria Jeysingh Anbu
  • 3,164
  • 3
  • 34
  • 55
7
votes
1 answer

Access action props in @ngrx effect with ofType for multiple actions

I have 2 Actions and an Effect for these 2 actions using ofType operator as below: export const myActions = { actionA: createAction(`actionA`, props<{ a: string }>()), actionB: createAction(`actionB`, props<{ b: number }>()) } myEffect$ =…
Xuan
  • 578
  • 6
  • 14
7
votes
2 answers

ERROR TypeError: Cannot assign to read only property 'isSelected' of object '[object Object]'

I just want to update a property value of an array element in My NgRx Store Object after cloning it to avoid mutation but no success. Here is the Reducer Code: on( myActions.elementDeselected, (state, { desiredId}) => { const…
DevLoverUmar
  • 11,809
  • 11
  • 68
  • 98
7
votes
1 answer

how to make async call in react-redux hooks with thunk?

I starting to learn hooks. But i dont understand how right work with async call. Earlier i was use import * as actionQR from "../actions/qr"; ... function mapDispatchToProps(dispatch) { return { actionQR: bindActionCreators(actionQR,…
7
votes
2 answers

How to architect a react-redux app with grpc-web?

I have a react-redux app and my team uses grpc-web. I'm wondering - what's the best way to design such system? For now the plan is to create 3 abstraction levels: API module - promisified wrappers around grpc-web clients Redux thunks level - async…
emil14
  • 71
  • 5
7
votes
3 answers

Using redux hooks outside of a component for code reusability

I have a functional component as follows and i have a function which has two dispatches. One sets the error message and the other removes the error message after a brief time out period. The functionality of setting errors and clearing comes in many…
Muljayan
  • 3,588
  • 10
  • 30
  • 54
7
votes
3 answers

How to configure both localStorage and sessionStorage in redux-persist?

I want to store user related properties in sessionStorage and other properties in localStorage. I was able to store all properties in localStorage using persist with this below configuration import reducers from './reducer'; import { persistStore,…
AD95
  • 180
  • 2
  • 7
1 2 3
99
100