javascript - React / Redux component props from `connect` out of sync with store in click handler -

i ran interesting error in react/redux app unfortunately haven't been able reproduce. stack, looks props in redux-connected component somehow getting out of sync global store.

the basic idea connected component has click handler dispatches action if prop set. somehow action got dispatched, in middleware action, global store shows state prop null.

should possible in react/redux? reason can imagine else changes global store while click event handling enqueued or delayed. don't know enough react internals know if that's reasonable.

below simplified version of app. there other parts of app dispatching setexample in response other events, i.e. routing.

import react 'react' import { render } 'react-dom' import { createstore, applymiddleware } 'redux' import { provider, connect } 'react-redux'  // reducer  const defaultstate = { example: null }  const setexample = example => ({ type: 'set_example', example })  const reducer = (state = defaultstate, action) => {   switch (action.type) {     case 'set_example':       return {         ...state,         example: action.example       }     default:       return state   } }  // middleware  const middleware = store => next => action => {   switch (action.type) {     case 'set_example':       if (!action.example && !store.getstate().example) {         console.log('impossible?')       }       break     default:       break   }   return next(action) }  // component  const mapstatetoprops = state => state const mapdispatchtoprops = { setexample }  const component = props => {   const onclick = () => {     if (props.example) {       props.setexample(null)     }   }    return <div onclick={onclick}>example</div> }  const connectedcomponent = connect(mapstatetoprops, mapdispatchtoprops)(component)  // app  const store = createstore(reducer, applymiddleware(middleware))  render(   <provider store={store}>     <connectedcomponent />   </provider>,   document.getelementbyid('root') )