Question

我正在使用react-navigation的SwitchNavigator基于身份验证状态管理我的导航。通过身份验证后，我想使用Redux来存储正在获取的数据。

我的SwitchNavigator看起来像这样

SwitchRouteConfig = {
  AuthLoading: AuthLoadingScreen,
  Authenticated: AppStackNavigator,
  NotAuthenticated: AuthStackNavigator,
}

SwitchConfig = {
  initialRouteName: 'AuthLoading',
}

export default createSwitchNavigator(SwitchRouteConfig, SwitchConfig);

我的身份验证导航如下：

// App Bottom Tab Navigator
const AppTabRouteConfig = {
  AddItem: { screen: AddItem },
  Items: { screen: Items },
  Map: { screen: Map },
  Help: { screen: Help },
}
const AppTabConfig = { initialRouteName: 'Items',}
const AppTabNavigator = new createBottomTabNavigator(
                     AppTabRouteConfig, 
                     AppTabConfig)

在我的屏幕上，我们有：

class Items extends React.Component {
  constructor(props){
    super(props);
    this.state = {};
  }

  componentDidMount(){
    this.props.getData(); //call our redux action
  }

  render() {
  if(this.props.isLoading){
    return(
      <View>
        <ActivityIndicator />
      </View>
    )
    } else {
      return (
        <Provider store={store}>
          <SafeAreaView>
            <FlatList
              data={this.props.dataSource.features}
              renderItem={({ item }) =>
                <TouchableWithoutFeedback>
                  <View style={styles.listContainer}>
                    <Text>{item.prop1}</Text>
                    <Text>{item.prop2}</Text>
                  </View>
                </TouchableWithoutFeedback>
              }
            />
          </SafeAreaView>
        </Provider>
      )
  }
  }
}

function mapStateToProps(state, props) {
  return {
    isLoading: state.dataReducer.isLoading,
    dataSource: state.dataReducer.dataSource
  }
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators(Actions, dispatch);
}

export default connect(mapStateToProps,
                       mapDispatchToProps)(Items)

我未通过身份验证时，可以正常工作。我可以登录。通过身份验证后，出现以下错误：

Invariant Violation: Could not find "store" 
in either the context or props of 
Connect(Items)". Either wrap the root 
component in a <Provider>, or explicitly pass 
"store" as a prop to "Connect(Items)".

在我今天所做的阅读中，所有示例都具有一个单独的顶级组件，它们可以包装在一起。因此，我不了解您如何在没有该模型的情况下实例化存储和管理Redux。

我还要提到另外两件事：

在我开始实施Redux之前，最初经过身份验证的应用程序屏幕运行良好。
我不是要使用Redux来管理状态，而只是尝试应用程序数据。
从Create-React-Native-App开始的项目。

谢谢！

在React-Native应用程序中，如何使用SwitchNavigator（react-navigator）和react-redux？

0 个答案: