如何在 react native 中设置 redux？

Question

我的代码：

function App({ isAuthenticated }) {

    const dispatch = useDispatch();
    const [token, setToken] = useState()
    const [appLoaded, setAppLoading] = useState(false)
    const routes = buysellRoutes(isAuthenticated, token);

     const [fontsLoaded] = useFonts({
         Inter_900Black,
     })
   

    return (
        <Provider store={store}>
        <ApplicationProvider {...eva} theme={eva.light}>
            { appLoaded && fontsLoaded ? routes : <PreLoadScreen />}
        </ApplicationProvider>
        </Provider>
    )
}

function mapStateToProps(state) {
    return {
        isAuthenticated: state.auth.isAuthenticated,
    };
}

export default connect(mapStateToProps)(App);

错误：在“Connect(App)”的上下文中找不到“store”。要么将根组件包装在 a 中，要么将自定义的 React 上下文提供者传递给连接选项中的 Connect(App)，并将相应的 React 上下文消费者传递给。

Answer 1

这里的主要问题是你不能在没有提供者的情况下连接主要组件，所以创建一个 HOC 并将商店提供给整个应用程序，然后你可以连接。

另一种方式是，您可以在内部组件中使用 context，这样您就不需要连接组件，只需将商店提供给主 HOC。

你可以参考这个项目进行初始的 react native 应用设置 react native starter project with redux

Answer 2

您的实施存在一些问题。我将尝试逐步解释它们：

首先，您需要一个store.js 文件来在您的App.js 之外创建您的商店。欲了解更多信息，请查看其documentation。

其次，App 组件被视为 react 结构中的根组件，因此请避免将 props 传递给根组件，这显然是错误的。

第三，需要将<Provider store={store} >的store通过useSelector方法在组件或页面中消费store（获取store的数据作为状态），不再需要mapStateTopProps。

注意：您必须定义 store 并将其传递给顶级组件，并在 children 内部使用它。

注意：要检查isAuthenticated 属性，分离您的ApplicationProvider 并为其创建一个组件。

function SomeComponent() {
  const isAuthenticated = useSelector(state => state.auth.isAuthenticated)
  
  const dispatch = useDispatch();
  const [token, setToken] = useState()
  const [appLoaded, setAppLoading] = useState(false)
  const routes = buysellRoutes(isAuthenticated, token);
  
  return(
    <ApplicationProvider {...eva} theme={eva.light}>
      { appLoaded && fontsLoaded ? routes : <PreLoadScreen />}
    </ApplicationProvider>
  )
}

可选：

您可能需要在组件中调度一些操作，使用 react 钩子很容易使用 useSelector 和 useDispatch 而没有 mapStateToProps 或 mapDispatchToProps：

function SomeExampleComponent () {
 const dispatch = useDispatch();
  
 const handleToggle = () => {
   // ...
   dispatch({type: "TOGGLE", payload: undefiend})
   // or you can dispatch some actions that you defined before:
   dispatch(onToggleAction())
 }  

 return (
   <div onClick={handleToggle}>
     // ... 
   </div>
 )}