Reactjs Redux连接的组件在减速器中的状态更改时未重新加载

这是我的代码

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;
  }

combinereducer.js

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

Main.js

  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')
);

HeaderView.js

  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>
    );
  }

---

当在HeaderView.js中单击注销时，将调用LOGOUTSUCCESS操作，并且reducer“auth”更改对象中“isAuthenticated”的值，但该更改不会调用连接容器的“MapStateTops”函数，并且，即使在注销后，reducer“auth”的值也是相同的，即true。

因为当父组件发生

prop

更改时，子组件不会重新呈现。您可以将

connect

HoC视为HeaderView组件的父级。有关重新渲染条件的详细信息，请选中此项

---

您需要使用组件willreceiveprops更改

状态

。在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>
    );
  }

构造函数（道具）{
超级（道具）；
此.state={
isAuthenticated=false
}
}
组件将接收道具（下一步）{
if（nextrops.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；
返回(
{是否已验证(
注销

page2

) : (
登录{'}登录
{'}以继续。
)}
);
}

您是否尝试过

const-mapStateToProps=（{auth}）=>（{…auth}）是的，我试过了，但没有成功。Thanx，但实际上我想在另一个选项卡中单击“HeaderView.js”的“注销”时，在“SomeContainer.js”中验证IsAuthentication的更新值。我想你可以在SomeContainer.js中做同样的事情（设置状态）。如何使用SomeContainer.js中的
isAuthenticated
值，即
const-mapstatetops=（{auth}）=>（{auth}）我这样检查它
如果（！this.props.auth.isAuthenticated）{this.props.history.push（{pathname:'/'}）；}
组件将接收props（nextProps）{if（nextProps.auth.isAuthenticated！==this.props.auth.isAuthenticated）{this.props.history.push（{pathname:'/'}）；}
我想这应该行得通。我尝试过这个函数，但没有调用。我认为“连接”功能也会做同样的事情，寻找redux商店状态的变化，但不知道为什么它没有在这里改变。
const mapStateToProps = ({ auth }) => ({
  auth
  });

  const mapDispatchToProps = dispatch => ({
  });

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

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>
    );
  }