React-redux，connect函数不会使用新数据更新状态

Question

I am using Redux as a Flux alternative and React for the view layer. My application's React and Redux are bound with react-redux connect() method. When running the application it dispatches the action when the components mounts and the redux returns the correct state. However the redux-logger logs in the console that the store has updated with the new state, in the component when checking this.props.session it still shows the old state. I am guessing that I'm not using the connect method correctly, however I can't define the issue with it as well. Does anyone have an idea whats going on?

containers/App

'use strict';

import React from 'react';
import {connect} from 'react-redux';
import {fetchUserSession} from 'actions/SessionActions';

class App extends React.Component {
  constructor(props) {
    super(props);
  }
  componentWillMount() {
    const {dispatch, session} = this.props;
    dispatch(fetchUserSession());
    console.log(session);
    // logs:
    // Object {currentUserId: null, errorMessage: null, isSessionValid: null}

    // store is bound to window, and the initial state is ImmutabeJS object
    console.log(window.store.getState().session.toJS());
    // logs:
    // Object {currentUserId: null, errorMessage: null, isSessionValid: false}
    // as you might noticed the isSessionValid is changed to false
  }

  render() {
    // html here 
  }
}

function mapStateToProps(state){
  return {
    session: state.session.toJS()
  };
}

export default connect(mapStateToProps)(App);

actions/Actions.js

'use strict';

import fetch from 'isomorphic-fetch';

export const SESSION_REQUEST = 'SESSION_REQUEST';
export const SESSION_SUCCESS = 'SESSION_SUCCESS';

export function requestSession() {
  return {
    type: SESSION_REQUEST
  };
}

export function receiveSession(user) {
  return {
    type: SESSION_REQUEST,
    user
  };
}

export function fetchUserSession() {
  return dispatch => {
    dispatch(requestSession());
    return fetch(`http://localhost:5000/session`)
      .then((response) => {
        if (response.status === 404) {
          dispatch(raiseSessionFailure(response));
        }
        return response.json();
      })
      .then(userData => dispatch(receiveSession(userData)));
  };
}

reducers/SessionReducer.js

'use strict';
import {fromJS} from 'immutable';

// UPDATE!!!
// here is the initial state
const initialState = fromJS({
  currentUserId: null,
  errorMessage: null,
  isSessionValid: null
});

function sessionReducer(state = initialState, action) {
  switch (action.type) {
    case 'SESSION_REQUEST':
      return state.update('isSessionValid', () => false);
    case 'SESSION_SUCCESS':
      console.log('Reducer: SESSION_SUCCESS');
      return state;
    case 'SESSION_FAILURE':
      console.log('Reducer: SESSION_FAILURE');
      return state;
    default:
      return state;
  }
}

export default sessionReducer;

reducers/RootReducer

'use strict';

import {combineReducers} from 'redux';
import sessionReducer from 'reducers/SessionReducer';

const rootReducer = combineReducers({
  session: sessionReducer
});

export default rootReducer;

Answer 1

The issue is with the way the session variable is being logged from props and from the store. When you dispatch the action to update state it is synchronously updating the store, which is why you see that the store has been updated when you log it directly. However, react-redux won't be able to update props until the call to componentWillMount has completed and React has had a chance to catch up and rerender the component with the new state. If you dispatch the action in componentWillMount and log the session prop at a later time you will see that it has changed to reflect the action.

Answer 2

Looks like you don't change state in action handlers in reducer. Only case with other than return state code says state.update('isSessionValid', () => false) — what does it return? If it's the same object as previous state, redux wouldn't change anything because of immutability convention.