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

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

本文关键字:数据 状态 更新 新数据 connect 函数 React-redux      更新时间:2023-09-26

我使用Redux作为Flux的替代品,React作为视图层。我的应用程序的ReactReduxreact-redux connect()方法绑定。当运行应用程序时,它会在组件挂载时调度操作,redux返回正确的状态。但是,redux-logger在控制台中记录存储已经用新状态更新的日志,在组件中检查this.props.session时,它仍然显示旧状态。我猜我没有正确使用connect方法,但是我也无法定义这个问题。有人知道是怎么回事吗?

容器/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.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)));
  };
}

异径接头/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;

异径接头/RootReducer

'use strict';
import {combineReducers} from 'redux';
import sessionReducer from 'reducers/SessionReducer';
const rootReducer = combineReducers({
  session: sessionReducer
});
export default rootReducer;

问题是session变量从props和存储中被记录的方式。当您将操作分派到更新状态时,它将同步更新存储,这就是为什么您在直接记录它时看到存储已被更新的原因。但是,React -redux将无法更新props,直到对componentWillMount的调用完成,并且React有机会赶上并呈现具有新状态的组件。如果您调度componentWillMount中的动作并稍后记录session道具,您将看到它已经更改以反映动作。

看起来你不改变状态在减速机的动作处理程序。只有case而不是return state代码是state.update('isSessionValid', () => false) -它返回什么?如果它是与前一个状态相同的对象,redux不会改变任何东西,因为不可变性约定。