如何在React Native中配置Redux？代码运行报store找不到错误怎么解决？

错误根因 #

你将Redux的<Provider>写在了被connect包装的App组件内部，connect高阶组件、useDispatch等Redux相关API执行时需要从上层React上下文获取store实例，此时Provider还未渲染，自然无法拿到store触发报错。

修复方案 #

拆分组件结构，将Provider移到被connect包装的组件外层：

1. 把原有App的业务逻辑抽离为单独的子组件，用connect包装这个子组件
2. 外层入口组件仅负责渲染Provider，包裹被connect后的子组件

修复后代码示例 #

// 抽离业务逻辑为AppContent，Redux相关API都在这个组件内使用
function AppContent({ isAuthenticated }) {
    const dispatch = useDispatch();
    const [token, setToken] = useState()
    // 修复原代码状态和更新函数命名不匹配的问题
    const [appLoaded, setAppLoaded] = useState(false)
    const routes = buysellRoutes(isAuthenticated, token);

    const [fontsLoaded] = useFonts({
        Inter_900Black,
    })
   
    return (
        <ApplicationProvider {...eva} theme={eva.light}>
            { appLoaded && fontsLoaded ? routes : <PreLoadScreen />}
        </ApplicationProvider>
    )
}

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

// 包装业务子组件
const ConnectedAppContent = connect(mapStateToProps)(AppContent);

// 外层组件仅负责提供store上下文
function App() {
    return (
        <Provider store={store}>
            <ConnectedAppContent />
        </Provider>
    )
}

export default App;

注意事项 #

• 所有使用useDispatch、useSelector的组件，以及被connect包装的组件，必须是Redux Provider的后代组件，不可在渲染Provider的同级或上层组件中调用Redux API
• 原代码中状态更新函数命名与状态名不匹配，已在示例代码中修正，避免后续逻辑出现异常

内容的提问来源于stack exchange，提问作者Тахир Мухаметов