Question

需要加载我的主要组件，如果是具有对值的本地存储＆＃34;已记录：true＆＃34;存在重定向到＆＃34; / app＆＃34;使用react-router。

我正在使用react-redux，这是我的代码：

class Main extends Component {

  componentWillMount(){
// Return true in redux state if localstorage is found
      this.props.checkLogStatus();
  }

  componentDidMount(){
// redirect in case redux state returns logged = true
      if(this.props.logStatus.logged){
          hashHistory.push('/app');
      }
  }

  render() {
    return (
    <App centered={true} className="_main">
        {this.props.children}
    </App>
    );
  }
}

我的redux行动：

checkLogStatus() {
  // check if user is logged and set it to state
  return { 
      type: LOGIN_STATUS,
      payload: window.localStorage.sugarlockLogged === "true"
  };
}

但是当组件进入componentDidMount阶段时，我的redux状态仍未更新。

Y设法通过使用：

来实现这一目标

componentWillReceiveProps(nextProps){
      if (nextProps.logStatus.logged && nextProps.logStatus.logged !== this.props.logStatus.logged){
          hashHistory.push('/app');
      }
  }

但我不确定这是最优雅的解决方案。

提前致谢！

Answer 1

使用componentWillReceiveProps是这里的方法，因为你的logStatus对象作为正被更改的prop传入。

使用Redux-thunk middleware有一个更优雅的方法，它允许你调度一个函数（接收dispatch作为参数而不是对象动作。然后你可以将该函数包装在一个承诺并在componentWillMount中使用它。

在您的操作文件中：

updateReduxStore(data) {
  return { 
      type: LOGIN_STATUS,
      payload: data.logInCheck
  };
}

validateLocalStorage() {
  ...
}

checkLogStatus() {
    return function(dispatch) {
        return new Promise((resolve, reject) => {
            validateLocalStorage().then((data) => {
                if (JSON.parse(data).length > 0) {
                    dispatch(updateReduxStore(data));
                    resolve('valid login');
                } else {
                    reject('invalid login');
                }
            });
        });
    };
}

然后在你的组件中：

componentWillMount() {
    this.props.checkLogStatus()
      .then((message) => {
          console.log(message); //valid login
          hashHistory.push('/app');
      })
      .catch((err) => {
          console.log(err); //invalid login
      });
}

Redux-thunk中间件是为这种用例而制作的。

componentDillMount中无法识别componentWillMount中的Redux状态更改？

1 个答案: