Redux连接元件在减速器状态改变时不重新显示

Question

这是我的减速器代码

const authReducer = (
  state = {
    isAuthenticated: !AuthService.isTokenExpired(),
    isFetching: false,
    profile: AuthService.getProfile(),
    error: null
  },
  action
) => {

  switch (action.type) {    
   case types.LOGOUT_SUCCESS:
   return Object.assign({}, state, {
      isAuthenticated: false,
      isFetching: false,
      profile: {},
      error: null
    })
    default:
      return state;
  }

export default combineReducers({
    apiDataReducer,
    auth: authReducer
});

  import rootReducer from './reducers/combineReducers';
    import reduxImmutableStateInvariant from 'redux-immutable-state-invariant';
    imp

ort thunk from 'redux-thunk';

const middleware = process.env.NODE_ENV !== 'production' ?  [reduxImmutableStateInvariant(), thunk] :  [thunk];

export let store = createStore(rootReducer, applyMiddleware(...middleware));

render(
  <Provider store={store}>
    <Router>
      <App />
    </Router>
  </Provider>,
  document.getElementById('root')
);

  import React, { Component } from 'react';

    import { connect } from 'react-redux';
    import { withRouter } from 'react-router-dom';
    import * as authActions from '../../actions/basicActions';
    import HeaderView from './HeaderView';
    //import authReducer from './reducers/authReducer';


    const mapStateToProps = ({ auth }) => ({
      auth
      });

      const mapDispatchToProps = dispatch => ({
        loginRequest: () => dispatch(authActions.loginRequest()),
        logoutSuccess: () => dispatch(authActions.logoutSuccess())
      });

      export default withRouter(
        connect(mapStateToProps, mapDispatchToProps)(HeaderView)
      );

  handleLogoutClick = () => {
    this.props.logoutSuccess();
    this.props.history.push({ pathname: '/' });
  };

  render() {

    const { auth } = this.props;
    return (
      <div>
        {auth.isAuthenticated ? (
          <div>
            <div>
              <table>
                <tbody>

                      <label>
                        <aonClick={this.handleLogoutClick}> Log Out </a>
                      </label>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <nav className="navbar navbar-default">
              <ul className="nav navbar-nav">
                <li key="1" id="1" onClick={this.handleClick}><Link to={'/page2'}>page2</Link></li>
              </ul>
            </nav>
          </div>
        ) : (
            <label className="Note">
              logged in{' '} <a onClick={this.handleLoginClick}> Log In </a>
              {' '} to continue.
                </label>
          )}
      </div>
    );
  }

这是我的容器组件，其中reducer auth中的状态变化没有反映SomeContainer.js

const mapStateToProps = ({ auth }) => ({
  auth
  });

  const mapDispatchToProps = dispatch => ({
  });

  export default connect(mapStateToProps, mapDispatchToProps)(SomeContainer);

当在HeaderView.js中单击LOGOUTSUCCESS操作时，会调用LOGOUTSUCCESS操作，并且reducer'auth'更改了object中“is authenticated”的值，但该更改不会调用连接容器的“map stateToProps”函数，即使在注销之后，reducer'auth'的值也是相同的，即true。

Answer 1

因为当从父组件发生道具更改时，子组件不会重新呈现。您可以将connectHoC视为HeaderView组件的父级。有关重新呈现条件的更多信息，请检查此问题。

您需要使用ComponentWillReceiveProps更改状态。在HeaderView.js文件中：

constructor(props) {
      super(props);
      this.state = {
         isAuthenticated = false
      }
}

componentWillReceiveProps(nextProps) {
     if(nextProps.auth.isAuthenticated !== this.props.auth.isAuthenticated) {
        this.setState({isAuthenticated: nextProps.auth.isAuthenticated});
     }
}

handleLogoutClick = () => {
    this.props.logoutSuccess();
    this.props.history.push({ pathname: '/' });
  };

render() {

    const { isAuthenticated } = this.state;
    return (
      <div>
        {isAuthenticated ? (
          <div>
            <div>
              <table>
                <tbody>

                      <label>
                        <aonClick={this.handleLogoutClick}> Log Out </a>
                      </label>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <nav className="navbar navbar-default">
              <ul className="nav navbar-nav">
                <li key="1" id="1" onClick={this.handleClick}><Link to={'/page2'}>page2</Link></li>
              </ul>
            </nav>
          </div>
        ) : (
            <label className="Note">
              logged in{' '} <a onClick={this.handleLoginClick}> Log In </a>
              {' '} to continue.
                </label>
          )}
      </div>
    );
  }