无法从`node_modules/react-redux/lib/connect/mapDispatchToProps.js 解析模块`../../../../src/redux`

Question

我第一次尝试原子设计时，正在尝试将带有 redux 工具包的 redux 添加到现有的 react native 应用程序中。

我已根据文档将我的 index.js 组件包装在 <Provider> 中，但似乎 react-redux 正在搜索一个名为“src/redux”的位置，这会引发错误。

我最初尝试在“src/redux”文件夹中组合所有 redux 功能，并使用 jsonconfig.json 将“_redux”别名为路径“src/redux”，子文件夹和 index.js 文件指向子文件夹“actions”， 'reducers' 和 'store'。

我遇到了一些错误，并认为拥有一个名为“redux”的文件夹可能是一种错误的形式，所以我将其更改为“appRedux”，然后出现了这个问题。

我已经删除了 node_modules 并重新安装了多次，清除了 Metro 缓存，在整个应用程序中搜索了对“src/redux”的任何引用，最后通过将 git 重置为 HEAD 并再次添加 appRedux 和新模块从头开始，只是遇到同样的错误。现在我猜可能文件夹命名问题只是一个巧合，但我不知道如何解决。

有什么建议吗？带有 react native 的 redux-toolkit 上没有太多东西，我不想写所有的样板 redux 代码。

完全错误：

error: Error: Unable to resolve module `../../../../src/redux` from `node_modules/react-redux/lib/connect/mapDispatchToProps.js`: 

None of these files exist:
  * src/redux(.native|.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.svg|.native.svg|.svg)
  * src/redux/index(.native|.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.svg|.native.svg|.svg)
    at ModuleResolver.resolveDependency (/APPDIR/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:163:15)
    at ResolutionRequest.resolveDependency (/APPDIR/node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:52:18)
    at DependencyGraph.resolveDependency (/APPDIR/node_modules/metro/src/node-haste/DependencyGraph.js:287:16)
    at Object.resolve (/APPDIR/node_modules/metro/src/lib/transformHelpers.js:267:42)
    at /APPDIR/node_modules/metro/src/DeltaBundler/traverseDependencies.js:434:31
    at Array.map (<anonymous>)
    at resolveDependencies (/APPDIR/node_modules/metro/src/DeltaBundler/traverseDependencies.js:431:18)
    at /APPDIR/node_modules/metro/src/DeltaBundler/traverseDependencies.js:275:33
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (/APPDIR/node_modules/metro/src/DeltaBundler/traverseDependencies.js:87:24)

package.json：

{
  "name": "*APPNAME*",
  "version": "*VERSION*",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "@react-native-community/masked-view": "^0.1.10",
    "@react-navigation/native": "^5.6.0",
    "@react-navigation/stack": "^5.5.1",
    "@reduxjs/toolkit": "^1.4.0",
    "axios": "^0.19.2",
    "compare-versions": "^3.6.0",
    "react": "16.11.0",
    "react-devtools": "^4.7.0",
    "react-native": "0.62.2",
    "react-native-camera": "^3.31.0",
    "react-native-elements": "^2.0.2",
    "react-native-gesture-handler": "^1.6.1",
    "react-native-reanimated": "^1.9.0",
    "react-native-safe-area-context": "^3.0.6",
    "react-native-screens": "^2.9.0",
    "react-native-sensitive-info": "^5.5.5",
    "react-native-svg": "^12.1.0",
    "react-native-svg-transformer": "^0.14.3",
    "react-native-vector-icons": "^6.6.0",
    "react-native-version-number": "^0.3.6",
    "react-navigation": "^4.3.9",
    "react-redux": "^7.2.0",
    "redux": "^4.0.5"
  },
  "devDependencies": {
    "@babel/core": "^7.10.2",
    "@babel/runtime": "^7.10.2",
    "@react-native-community/eslint-config": "^1.1.0",
    "babel-jest": "^26.0.1",
    "babel-plugin-module-resolver": "^3.2.0",
    "eslint": "^7.2.0",
    "eslint-import-resolver-babel-module": "^5.1.0",
    "eslint-plugin-import": "^2.18.2",
    "jest": "^26.0.1",
    "metro-react-native-babel-preset": "^0.59.0",
    "react-test-renderer": "16.11.0"
  },
  "jest": {
    "preset": "react-native"
  }
}

jsonconfig.json：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "_assets": ["src/assets/*"],
      "_components": ["src/components/*"],
      "_atoms": ["src/components/atoms/*"],
      "_molecules": ["src/components/molecules/*"],
      "_organisms": ["src/components/organisms/*"],
      "_navigations": ["src/navigations/*"],
      "_scenes": ["src/scenes/*"],
      "_services": ["src/services/*"],
      "_styles": ["src/styles/*"],
      "_utils": ["src/utils/*"],
      "_app_redux": ["src/appRedux/*"]
    }
  }
}

src/index.js:

import 'react-native-gesture-handler';
import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from 'react-native-screens/native-stack';
import {Provider} from 'react-redux';
import {store} from '_app_redux';

import {*VARIOUS_SCENES*} from '_scenes';

const Stack = createNativeStackNavigator();

const App: () => React$Node = () => {
  return (
    <Provider store={store}>
      <NavigationContainer>
        <Stack.Navigator initialRouteName="*INITIAL_SCENE*" mode="modal">
          *<VARIOUS_SCENES>*
        </Stack.Navigator>
      </NavigationContainer>
    </Provider>
  );
};

export default App;

src/appRedux/store/store.js：

import {configureStore} from '@reduxjs/toolkit';

export default configureStore({
  reducer: {},
});

Answer 1

Ciao，<Provider> 包装器必须用于位于根文件夹的 index.js 文件中。举个例子：

index.js

import React from 'react';
import { AppRegistry } from 'react-native';
import App from './App';
import { name as appName } from './app.json';
import { Provider } from 'react-redux';
import { store } from "./app/redux/store";


const ReduxApp = () => (
    <Provider store={store}>
        <App />
    </Provider>
 )

 AppRegistry.registerComponent(appName, () => ReduxApp);

注意：用户反馈后更新答案