Connected component won't re-render

[Yorgg]

I've been scratching my head as to why my connected component won't re-render.

From my understanding, after dispatching, a connected component will have forceUpdate() called on it if a shallow comparison of the state slice (of what you pass into mapStateToProps(x) compared to the next state) returns false.

My dispatch changes the store state, but does not re-render the connected ProfilePage component. And I don't seem to be mutating state.user.profile , so I am not sure what the problem is.

Dispatched action:

dispatch(profile.actions.update({email: 'blah@blah.com'}));

Store structure:

{
  user: {
    profile:  {
      email: null
    }
  } 
}

ProfilePage.js (the connected component):

//component omitted 

function mapStateToProps(state) {
  return { 
    initialFormValues: state.user.profile 
  }
}

export default connect(mapStateToProps)(ProfilePage)

profileReducer.js (where the update action is intercepted):

export default function(state = { email: null }, action) {
  switch (action.type) {
    case t.UPDATE:
      return { ...state, ...action.values };  //this is a new object (not mutated)
    default:
      return state;
  };
};

userReducer.js:

import { combineReducers } from 'redux';
import session from './session';
import profile from './profile';

export default combineReducers({
  profile: profile.reducer
});

rootReducer.js:

import {combineReducers} from 'redux'; 
import {routerReducer as router} from 'react-router-redux';
import { reducer as form } from 'redux-form';
import user from './modules/user';

const rootReducer = combineReducers({  
  form,
  user: user.reducer, 
   router
})

export default rootReducer; 

store.js

import reducer from './rootReducer';
import thunk from 'redux-thunk'
import logger from 'redux-logger'

import { createStore, compose, applyMiddleware } from 'redux';
import { routerMiddleware as router } from 'react-router-redux';

export default function(history) {
  return createStore(
    reducer, 
    compose(
      applyMiddleware(
        router(history),
    thunk,
    logger
      )
    )
  )
}

[markerikson]

Yeah, I saw your question over on SO and Reddit, and I'll admit to being a bit confused myself. Based on the code snippets you've posted so far, that looks like it should work. Normally we'd tell you to post it on SO, but you did that already, and I'm kinda curious what's going on.

Any chance you can put up a repo that demonstrates the issue?

[Yorgg]

I was moments away from sharing the repo when I realized my error.

I initialized two separate store instances. The dispatch (initially called when the App component mounts) was using a different store than the App.

Doh.

On the plus side I learned more about react-redux internals. :/

class App extends Component {
  componentDidMount(props) {
    const jwt = localStorage.getItem('jwt');
    if(!!jwt) {
**    store(history).dispatch(user.actions.fetchUserData(jwt))    // the offending code
    }
  }

  render() {
    return (
      <Provider store={ store(history) }>    // And here a different store instance 
	<ConnectedRouter history={ history }>
          <AppWrapper>
	    <MainNav />
	    <Main>
	      <Switch>
		<Route path="/login" 
		       component={ LoginPage } />
		<Route path="/register" 
		       component={ RegisterPage } />
	      </Switch>
	    </Main>
	  </AppWrapper>
	</ConnectedRouter>
      </Provider>
    );
  }
}

export default App;