React 18/React Native 0.69中如何配置Redux Provider使用Redux

Redux的Provider组件作用是将已创建的Redux store注入整个应用组件树，必须放在应用组件树的最外层，你当前的入口注册逻辑不需要大改，直接在注册根组件的环节包裹即可，步骤如下：

• 第一步：安装依赖
  确保安装了Redux相关的兼容依赖，执行安装命令：

  npm install @reduxjs/toolkit react-redux
  # 如果你用yarn
  yarn add @reduxjs/toolkit react-redux
  

  注意react-redux版本要选8.0及以上，才会完美兼容React 18的钩子逻辑，低版本会出现调用钩子报错的问题。
• 第二步：创建Redux store实例
  在项目中新建store配置文件（比如路径src/store/index.js），最基础的store配置示例如下：

  import { configureStore } from '@reduxjs/toolkit'
  // 这里后续可以引入你自己写的slice reducer
  export const store = configureStore({
    reducer: {
      // 你的业务reducer配置
    }
  })
  

• 第三步：修改入口注册代码
  回到你贴的入口文件（一般是项目根目录的index.js），引入Provider和你创建的store，在AppRegistry.registerComponent的回调里，用Provider包裹原App组件，传入store属性即可，修改后的完整代码如下：

  /**
   * @format
   */
  import {AppRegistry} from 'react-native';
  import { Provider } from 'react-redux';
  import { store } from './src/store';
  import App from './App';
  import {name as appName} from './app.json';
  
  // 用Provider包裹根组件，注入store
  const Root = () => (
    <Provider store={store}>
      <App />
    </Provider>
  )
  
  AppRegistry.registerComponent(appName, () => Root);
  

可选放置方式说明 #

你也可以选择直接在App.js的根返回结构里套Provider，效果和上面的写法完全一致，但入口层包裹的写法更干净，不会和App组件内部的业务逻辑耦合，也能避免App组件内的逻辑错误导致store注入失效。

常见避坑点 #

• 注意Provider必须从react-redux包导入，不要错误引入其他同名组件
• 整个应用全局只需要包裹一次Provider即可，除非你有特殊的多store需求，否则不要重复嵌套多个Provider
• 所有调用useSelector、useDispatch等Redux钩子的组件，必须放在Provider包裹的组件树内部，否则会抛出找不到store的报错
• React 18相关的并发渲染特性不需要对Provider做额外配置，上述写法完全兼容RN0.69的默认渲染逻辑

内容的提问来源于stack exchange，提问作者system error