Stack Overflow
Stack Overflow

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
1068
votes
14 answers

How to dispatch a Redux action with a timeout?

I have an action that updates the notification state of my application. Usually, this notification will be an error or info of some sort. I need to then dispatch another action after 5 seconds that will return the notification state to the initial…
Ilja
  • 44,142
  • 92
  • 275
  • 498
438
votes
19 answers

axios post request to send form data

axios POST request is hitting the url on the controller but setting null values to my POJO class, when I go through developer tools in chrome, the payload contains data. What am I doing wrong? Axios POST Request: var body = { userName: 'Fred', …
Srikanth Gowda
  • 6,163
  • 7
  • 19
  • 34
425
votes
6 answers

What is mapDispatchToProps?

I was reading the documentation for the Redux library and it has this example: In addition to reading the state, container components can dispatch actions. In a similar fashion, you can define a function called mapDispatchToProps() that receives…
Code Whisperer
  • 22,959
  • 20
  • 67
  • 85
318
votes
12 answers

What is the best way to access redux store outside a react component?

@connect works great when I'm trying to access the store within a react component. But how should I access it in some other bit of code. For eg: let's say I want to use an authorization token for creating my axios instance that can be used globally…
Subodh Pareek
  • 3,907
  • 2
  • 11
  • 9
311
votes
5 answers

React Context vs React Redux, when should I use each one?

React 16.3.0 was released and the Context API is not an experimental feature anymore. Dan Abramov (the creator of Redux) wrote a good comment here about this, but it was 2 years when Context was still an Experimental feature. My question is, in your…
Alfrex92
  • 6,278
  • 9
  • 31
  • 51
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
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
236
votes
8 answers

What is {this.props.children} and when you should use it?

Being a beginner to React world, I want to understand in depth what happens when I use {this.props.children} and what are the situations to use the same. What is the relevance of it in below code snippet? render() { if (this.props.appLoaded) { …
nim007
  • 2,958
  • 3
  • 16
  • 28
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
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
161
votes
24 answers

How to enable file upload on React's Material UI simple input?

I am creating a simple form to upload file using electron-react-boilerplate with redux form & material ui. The problem is that I do not know how to create input file field because material ui does not support upload file input. Any ideas on how to…
gintoki27
  • 1,761
  • 2
  • 13
  • 11
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
157
votes
6 answers

Get version number from package.json in React Redux (create-react-app)

OP EDIT: If anyone else comes across this: the app was created using create-react-app, which limits importing to within the src folder. However if you upgrade react-scripts to v1.0.11 it does let you access package.json. I'm trying to get the…
Baldeep
  • 4,213
  • 4
  • 17
  • 17
155
votes
7 answers

How do I test axios in Jest?

I have this action in React: export function fetchPosts() { const request = axios.get(`${WORDPRESS_URL}`); return { type: FETCH_POSTS, payload: request } } How do I test Axios in this case? Jest has this use case on…
Adear
  • 1,885
  • 2
  • 11
  • 18
1
2 3
…
99 100