Question

要登录，我将令牌设置为令牌字符串'randomTokenString'（我可以使用'setToken'操作设置'token'属性。
要注销，我想将令牌设置为空。

问题是我在注销时无法设置令牌。（console.log（action.payload）按预期打印'null'。）

这是一个减速器片段

case SET_TOKEN:
      console.log('passing set token');
      console.log(action.payload); <- prints null as expected
      return { token: action.payload, errorMsg: '' };

减速器/ index.js

import { combineReducers } from 'redux';
import auth from './auth_reducer';
import menu from './menu_reducer';
export default combineReducers({
  auth,
  menu
});

这是屏幕

_doLogOut = () => {
    // remove token, close modal, set all props null.
    AsyncStorage.removeItem('token');
    this.setState({ isModalVisible: false })
    this.props.setToken(null);
    console.log(this.props.token); <- here it prints 'randomTokenString' (not null)
    if ( this.props.token == undefined || _.isNull(this.props.token) ) {
      this.props.navigation.navigate('Auth');
    }
  }

function mapStateToProps({ auth: { token }, menu:{ username, bio }}) {
  return {
    token, username, bio
  }
}



export default connect(mapStateToProps, actions)(MenuScreen);

这是行动部分

export const setToken = ( token ) => ({
  type: SET_TOKEN,
  payload: token
});

更新

我刚刚发现如果我再次按下注销，它会导航到'Auth'。因此reducer实际上将props保存为null。因此，当我检查props.token是否为空时，道具尚未更改......任何人都可以解释这个???太奇怪了。

我想我应该为setToken（）设置一个回调函数。

Answer 1

Redux动作是异步的，在它被缩减之后，状态会改变并更新道具。因此，调用操作后导航的逻辑应放在componentWillReceiveProps生命周期方法中，如下所示：

componentWillReceiveProps(newProps) {
  const { navigation, token: newToken } = newProps;
  const { token: oldToken } = this.props;

  if (oldToken !== newToken && _.isNil(newToken)) {
    navigation.navigate('Auth');
  }
}

注意：lodash isNil检查了undefined和null

reducer不能将props设置为null

1 个答案: