Questions tagged [react-redux]

The react-redux package provides the official React bindings for Redux: the `useSelector` and `useDispatch` hooks and the `connect` higher-order component. Use this tag for questions about accessing and updating Redux state in React components.

React Redux is a library that contains React bindings for Redux. Redux defines itself as a predictable state container for JavaScript apps. Redux works especially well with React.


Resources


Related tags

Redux enhancers:

Alternatives to Redux:

23349 questions
93
votes
10 answers

How to test a component using react-redux hooks with Enzyme?

I have a simple Todo component that utilizes react-redux hooks that I'm testing using enzyme but I'm getting either an error or an empty object with a shallow render as noted below. What is the correct way to test components using hooks from…
crowns4days
  • 963
  • 1
  • 6
  • 6
91
votes
11 answers

Why do I get “Reducer [...] returned undefined during initialization” despite providing initialState to createStore()?

I had set InitialState in my redux createStore method ,and I corresponding InitialState as second arguments I got a error in browser: Uncaught Error: Reducer "postsBySubreddit" returned undefined during initialization. If the state passed to…
Ice Wilder
  • 941
  • 1
  • 7
  • 7
90
votes
6 answers

Avoid no-shadow eslint error with mapDispatchToProps

I have the following component that triggers a no-shadow ESlint error on the FilterButton props. import { setFilter } from '../actions/filter'; function FilterButton({ setFilter }) { return (
Kerumen
  • 4,193
  • 2
  • 19
  • 33
89
votes
10 answers

Module not found: 'redux'

I have create a new react application using create-react-app cli. Then i have added the 'react-redux' library using npm install --save react-redux. In package.json I have: "react-redux": "^4.4.5" Unfortunately, the app doesn't compile and it…
Sal-laS
  • 11,016
  • 25
  • 99
  • 169
87
votes
4 answers

Passing props to react-redux container component

I have a react-redux container component that is created within a React Native Navigator component. I want to be able to pass the navigator as a prop to this container component so that after a button is pressed inside its presentational component,…
Mike
  • 6,149
  • 5
  • 34
  • 45
86
votes
10 answers

Error with Redux DevTools Extension using TS: "Property '__REDUX_DEVTOOLS_EXTENSION_COMPOSE__' does not exist on type 'Window'."?

I'm getting this error on my index.tsx. Property 'REDUX_DEVTOOLS_EXTENSION_COMPOSE' does not exist on type 'Window'. Here is my index.tsx code: import * as React from 'react'; import * as ReactDOM from 'react-dom'; import App from './App'; import…
85
votes
14 answers

Next.js - Error: only absolute urls are supported

I'm using express as my custom server for next.js. Everything is fine, when I click the products to the list of products Step 1: I click the product Link Step 2: It will show the products in the database. However if I refresh the /products page, I…
sinusGob
  • 4,053
  • 12
  • 46
  • 82
83
votes
5 answers

Warning: This synthetic event is reused for performance reasons happening with

I've been working on a simple react-redux todo example for a class and I came across several warning messages that show in the console everytime I check and uncheck a checkbox input. You can see the warnings in the following images. I also did a…
Raymi
  • 841
  • 1
  • 6
  • 3
81
votes
12 answers

"Error: You may not call store.getState() while the reducer is executing."

I just upgraded my fully functional react-native app to Redux v4, but now I am getting the following error: Error: Error: Error: Error: You may not call store.getState() while the reducer is executing. The reducer has already received the state as…
bbrodsky
  • 762
  • 1
  • 5
  • 18
77
votes
7 answers

How to add multiple middleware to Redux?

I have one piece of middleware already plugged in, redux-thunk, and I'd like to add another, redux-logger. How do I configure it so my app uses both pieces of middleware? I tried passing in an array of [ReduxThunk, logger] but that didn't…
doctopus
  • 5,349
  • 8
  • 53
  • 105
77
votes
5 answers

how to async/await redux-thunk actions?

action.js export function getLoginStatus() { return async(dispatch) => { let token = await getOAuthToken(); let success = await verifyToken(token); if (success == true) { dispatch(loginStatus(success)); } else { …
nabeel
  • 1,181
  • 2
  • 10
  • 24
75
votes
15 answers

React-Redux useSelector typescript type for state

I'm using the useSelector(state => state.SLICE_NAME) hook from React-Redux however I'm having difficulty defining the state parameter. It is set by default as unknown so I get an error when I try to return state.SLICE_NAME (Error: Object is of type…
Jake
  • 3,865
  • 5
  • 25
  • 58
71
votes
8 answers

_react.default.createContext is not a function when using react-redux

I have a problem when adding components to the entry point, this error immediately pops up here, how to fix it? I also try add only Main component but anyway i take that error, in main.jsx just class with render method return "hello…
Drop
  • 1,394
  • 3
  • 15
  • 25
71
votes
7 answers

Simple Conditional Routing in Reactjs

How to implement conditional routing i.e. if and only if some conditions satisfies, then routing should occur. For example, if and only if the user enters the correct credentials, login should be successful and the user should be able to see the…
68
votes
2 answers

Difference between using a HOC vs. Component Wrapping

I just checked out HOC's in React. They are pretty cool. However, doesn't simply wrapping a component achieve the same result? Higher Order Component This simple HOC passes state as properties to the ComposedComponent const HOC = ComposedComponent…
Tabbyofjudah
  • 1,973
  • 3
  • 17
  • 29