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
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
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
147
votes
23 answers

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 comment API for all post. export function…
Rajib Ahmed
  • 1,473
  • 2
  • 7
  • 4
134
votes
5 answers

Local package.json exists, but node_modules missing

I am trying to start a Redux application I just cloned from a GitHub repository. I tried to run it with the following command npm start I am getting this error > react-redux@1.0.0 start /home/workspace/assignment > webpack-dev-server --config…
Deepak Mahakale
  • 22,834
  • 10
  • 68
  • 88
129
votes
7 answers

How to use onClick event on react Link component?

I am using the Link component from the reactjs router and I cannot get the onClickevent working. This is the code: Here Is this the way to do it or another way?
bier hier
  • 20,970
  • 42
  • 97
  • 166
125
votes
10 answers

React router, pass data when navigating programmatically?

We could navigate to different path using this.props.router.push('/some/path') Is there a way to send params (object) along when navigating? There are other options I can think of, but wonder if passing object is possible at all? I could embed id…
eugene
  • 39,839
  • 68
  • 255
  • 489
119
votes
7 answers

How do I fix "Expected to return a value at the end of arrow function" warning?

Everything works fine, but I have this warning Expected to return a value at the end of arrow function array-callback-return. I tried using forEach instead of map, but then doesn't even show. How do I fix this? return…
Rami Chasygov
  • 2,714
  • 7
  • 25
  • 37
117
votes
8 answers

How do I access store state in React Redux?

I am just making a simple app to learn async with redux. I have gotten everything working, now I just want to display the actual state onto the web-page. Now, how do I actually access the store's state in the render method? Here is my code…
Parkicism
  • 2,415
  • 5
  • 20
  • 21
111
votes
4 answers

How does a redux connected component know when to re-render?

I'm probably missing something very obvious and would like to clear myself. Here's my understanding. In a naive react component, we have states & props. Updating state with setState re-renders the entire component. props are mostly read only and…
Joe Lewis
  • 1,970
  • 2
  • 18
  • 20
110
votes
1 answer

Can I mapDispatchToProps without mapStateToProps in Redux?

I am breaking apart Redux' todo example to try to understand it. I read that mapDispatchToProps allows you to map dispatch actions as props, so I thought of rewriting addTodo.js to use mapDispatchToProps instead of calling dispatch(addTodo()). I…
Iggy
  • 5,129
  • 12
  • 53
  • 87
108
votes
3 answers

What is the use of the ownProps arg in mapStateToProps and mapDispatchToProps?

I see that the mapStateToProps and mapDispatchToProps function which are passed to the connect function in Redux take ownProps as a second argument. [mapStateToProps(state, [ownProps]): stateProps] (Function): [mapDispatchToProps(dispatch,…
therewillbecode
  • 7,090
  • 4
  • 35
  • 42
103
votes
11 answers

When would bindActionCreators be used in react/redux?

Redux docs for bindActionCreators states that: The only use case for bindActionCreators is when you want to pass some action creators down to a component that isn't aware of Redux, and you don't want to pass dispatch or the Redux store to it. What…
d.code
  • 1,033
  • 2
  • 8
  • 4
98
votes
8 answers

useDispatch() Error: Could not find react-redux context value; please ensure the component is wrapped in a

I am trygin to use React-Redux library and I am getting the error on the title. I wrapped my components with Provider but I still get the error, only if I implement the useDispatch() hook. The app worked fine, until I added the useDispatch() line.…
MIPB
  • 1,770
  • 2
  • 12
  • 21
95
votes
6 answers

What are differences between redux, react-redux, redux-thunk?

I am using React + Flux. Our team is planning to move from flux to redux. Redux is very confusing for me coming from flux world. In flux control flow is simple from Components -> actions -> Store and store updates back components. Its simple and…
Chetan Motamarri
  • 1,204
  • 2
  • 12
  • 15
95
votes
6 answers

How to sync Redux state and url query params

I have a web page with a search panel. Search panel has several input fields: id, size, ... What I want is when user set search values (for example: id=123 and size=45) and press a search button: searchState in Redux reducer should be updated with…