React-redux，连接函数不使用新数据更新状态

Question

我正在使用 Redux 作为 Flux 替代方案，React 用于视图层。我的应用程序的 React 和 Redux 与 react-redux connect() 方法绑定。当运行应用程序在组件安装和 redux returns 正确状态时分派操作。但是 redux-logger 在控制台中记录商店已更新为新状态，在组件中检查 this.props.session 时它仍然显示旧状态。我猜我没有正确使用 connect 方法，但是我也无法用它来定义问题。有谁知道发生了什么事吗？

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

看起来您没有更改 reducer 中的操作处理程序的状态。只有 case 和 return state 以外的代码说 state.update('isSessionValid', () => false) — return 是什么意思？如果它与之前的状态是同一个对象，由于不变性约定，redux 不会改变任何东西。

Answer 2

问题出在从 props 和商店记录 session 变量的方式上。当您将操作分派到更新状态时，它会同步更新商店，这就是为什么您在直接登录时看到商店已更新的原因。但是，在对 componentWillMount 的调用完成并且 React 有机会赶上并使用新状态重新渲染组件之前，react-redux 将无法更新道具。如果您在 componentWillMount 中发送操作并稍后记录 session 道具，您将看到它已更改以反映该操作。

React-redux，连接函数不使用新数据更新状态

React-redux, connect function does not update the state with the new data

javascript

reactjs

redux