Jiraffe Jiraffe - 1 year ago 113
React JSX Question

react-redux store not updating within onClick function

I'm experiencing this weird issue where my react-redux store is updating, but is not updating within the function that calls the actions.

, then I set it to an integer with
, but it remains
and enters the next if condition.

I know my app is working because everything else works with
having the correct value.

Is this supposed to happen?


After doing some testing, it appears that the state remains the same inside the onClick function.

All calls to
made within the onClick function show no change to the state, but adding
setTimeout(() => {console.log(this.props)}, 1)
at the end to test shows that the state is being updated.

Other parts of the app are working as intended, with state changes applied immediately.

But I still don't understand what is going on.

Component function code

() => {
console.log(this.props.active); // undefined
if (this.props.active === undefined && this.props.readyQueue.length > 0) {
let activeProc = this.props.readyQueue[0];
this.props.actions.activeSet(activeProc); // set to an integer

console.log(this.props.active); // still remains undefined
if (this.props.active === undefined) {

function mapStateToProps(state, props) {
return {
active: state.ProcessReducer.active,

Action code

export const activeSet = (procId) => {
return {
type: 'ACTIVE_SET',

Reducer code

case 'ACTIVE_SET':
return Object.assign({}, state, {
active: action.procId

Answer Source

Your Redux state updates synchronously with the dispatch of your action. Your reducer has executed by the time the dispatch call returns.

However, React isn't Redux. Redux tells React-Redux's wrapper component that the state has changed. This also happens before dispatch returns.

React-Redux then tells React that the component needs to be rerendered by calling forceUpdate. React then waits until it feels it's a good time to take care of that. I haven't looked, but it probably uses setImmediate or equivalent but it's async. This allows React to batch updates and maybe there are other reasons.

In any case, the React-Redux wrapper component will get rendered by React when the time comes and it'll use your mapStateToProps to distill theprops out of the state and then passes them to React as props for your actual component. Then, when React feels it's an okay time, it calls your render method or function. It may do all kinds of things in before that, such as calling componentWillReceiveProps or rendering some other component that also needs rendering. In any case it's none of our business. React does its thing. But when your Render function is called, your props will now reflect the new state.

You shouldn't rely on new state in an onClick handler. The onClick should only call the bound action creator, which I guess is now more aptly called an action dispatcher. If something needs to be done with the new state, you should use Redux-Thunk middleware and create a thunked action creator. These have access to getState and if they don't perform any internal async stuff, then the entire action can actually be just as synchronous as a simple dispatch (not that you'd need that in a simple onClick handler).

Finally, React is very asynchronous in nature. Think of it as telling React what you want (component + props) and letting React take it from there. If React needs to know how to turn a component into DOM elements, it'll call your component's render function. How or when React does is thing is an implementation detail that doesn't concern us.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download