尝试根据redux状态有条件地设置导航链接

时间:2018-06-18 12:08:08

标签: reactjs react-native redux react-redux react-navigation

我正在尝试有条件地设置基于redux状态的导航链接,该状态最初未定义但在API调用后异步设置,但是,导航链接在api响应之前呈现一次,因此总是未定义。我正在寻找一些关于如何使用react-native和redux成功完成此操作的建议。

路线配置是 -

export default createBottomTabNavigator(
    {
        Home: HomeStack,
    Search: SearchStack,
    ...!store.getState().UserReducer.user_id ? { Login: LoginStack } : { }
    }
);

父组件是 -

export default class App extends Component
{
  constructor(props)
  {
    super(props);

    this.state = {
      isLoggedIn: false,
    }
  }

  componentWillMount()
  {
    fetch(ApiConfig.user.is_logged_in())
    .then(response => response.json())
    .then(({data}) => {
      if (data.status === false)
        return;
      // Set user information.
      store.dispatch(setUserId(data.session.user_id));
      store.dispatch(setUserName(data.session.username));
      store.dispatch(setUserEmail(data.session.email));
      store.dispatch(setUserLastLogin(data.session.old_last_login));
      store.dispatch(setUserLastIp(data.session.last_ip));
      store.dispatch(setShowCost(data.session.show_cost));
      store.dispatch(setShowPrice(data.session.show_price));
      store.dispatch(setAvatar(data.session.avatar));
      this.setState({ isLoggedIn: true });
    })
    .catch(error => console.error(error));
  }

  render()
  {
    return (
      <Provider store={store}>
        <NavigationStack loggedIn={this.state.isLoggedIn} />
      </Provider>
    );
  }
}

0 个答案:

没有答案