无法从`node_modules/react-redux/lib/connect/mapDispatchToProps.js 解析模块`../../../../src/redux` [英] Unable to resolve module `../../../../src/redux` from `node_modules/react-redux/lib/connect/mapDispatchToProps.js
问题描述
我第一次尝试原子设计时，正在尝试将带有 redux 工具包的 redux 添加到现有的 React Native 应用程序中.
I am trying to add redux with redux toolkit to an existing react native app with my first attempt at atomic design.
我已经按照文档将 index.js 组件包装在 <Provider> 中，但似乎 react-redux 正在搜索名为src/redux"的位置，该位置引发错误.
I have wrapped my index.js components in a <Provider> per the docs but it seems like react-redux is searching for a location called 'src/redux' which is throwing an error.
我最初尝试在src/redux"文件夹中组合所有 redux 功能，并使用 jsonconfig.json 将_redux"别名到路径src/redux"，子文件夹和 index.js 文件指向子文件夹actions"，'reducers' 和 'store'.
I originally tried to combine all redux functionality within an 'src/redux' folder and used jsonconfig.json to alias '_redux' to path 'src/redux' with subfolders and index.js files pointing to subfolders 'actions', 'reducers' and 'store'.
我遇到了一些错误，并认为有一个名为redux"的文件夹可能是错误的形式，所以我将其更改为appRedux"，然后出现了这个问题.
I came across some errors and figured it was probably bad form to have a folder called 'redux' so I changed it to 'appRedux' and then this problem appeared.
我删除了 node_modules 并重新安装了多次，清除了 Metro 缓存，在整个应用程序中搜索了对src/redux"的任何引用，最后通过将 git 重置为 HEAD 并再次添加 appRedux 和新模块重新从头开始，只会遇到同样的错误.现在我猜测文件夹命名问题可能只是巧合，但我不知道如何解决.
I've dropped node_modules and reinstalled multiple times, cleared metro caches, searched for any reference to 'src/redux' across the app, and finally started again from scratch by resetting git to HEAD and adding appRedux and new modules again, only to encounter the same error. Now I'm guessing that perhaps the folder naming issue was only a coincidence, but I'm at a loss on how to resolve.
有什么指点吗?带有 react native 的 redux-toolkit 内容不多，我不想编写所有样板 redux 代码.
Any pointers? There is not much out there on redux-toolkit with react native and I'd prefer not to have to write all the boilerplate redux code.
完全错误:
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: {},
});
推荐答案
Ciao、
Ciao, <Provider> wrapper must be used into the index.js file located on your root folder. Here an example:
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);
注意:在用户反馈后更新答案
Note: answer updated after user feedback
这篇关于无法从`node_modules/react-redux/lib/connect/mapDispatchToProps.js 解析模块`../../../../src/redux`的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
