我正试图在我的react原生应用程序中添加redux，但当我启动该应用程序时，我遇到了这个错误。我已经执行了这些步骤(无法从`node_modules/areact redux/lib/connect/mapDispatchToProps.js解析模块`../../../src/redux`(，但仍然收到此错误
错误
error: Error: Unable to resolve module `../../../../src/redux` from `node_modulesreact-reduxlibconnectmapDispatchToProps.js`:
None of these files exist:
* srcredux(.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)
* srcreduxindex(.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 (M:CimonFilesChaohchaohAppnode_modulesmetrosrcnode-hasteDependencyGraphModuleResolution.js:163:15)
at ResolutionRequest.resolveDependency (M:CimonFilesChaohchaohAppnode_modulesmetrosrcnode-hasteDependencyGraphResolutionRequest.js:52:18)
at DependencyGraph.resolveDependency (M:CimonFilesChaohchaohAppnode_modulesmetrosrcnode-hasteDependencyGraph.js:287:16)
at Object.resolve (M:CimonFilesChaohchaohAppnode_modulesmetrosrclibtransformHelpers.js:267:42)
at M:CimonFilesChaohchaohAppnode_modulesmetrosrcDeltaBundlertraverseDependencies.js:434:31
at Array.map (<anonymous>)
at resolveDependencies (M:CimonFilesChaohchaohAppnode_modulesmetrosrcDeltaBundlertraverseDependencies.js:431:18)
at M:CimonFilesChaohchaohAppnode_modulesmetrosrcDeltaBundlertraverseDependencies.js:275:33
at Generator.next (<anonymous>)
at asyncGeneratorStep (M:CimonFilesChaohchaohAppnode_modulesmetrosrcDeltaBundlertraverseDependencies.js:87:24)
index.js
import {AppRegistry} from 'react-native';
import { Provider } from 'react-redux';
import { store } from "reduxCore";
import App from './src/App';
import {name as appName} from './app.json';
const ReduxApp = () => {
<Provider store={store}>
<App />
</Provider>
}
AppRegistry.registerComponent(appName, () => ReduxApp);
src/App.js
import React, { Component } from 'react';
import EStyleSheet from 'react-native-extended-stylesheet';
import {PersistGate} from 'redux-persist/integration/react';
import createNavigator from './screens';
import {setStateAsynchronous} from 'utils/utils';
import {setNavigator} from 'utils/navigator';
import {COLOR_PALLETES} from 'utils/constants';
import {store, persistor} from 'reduxCore';
class App extends Component {
constructor() {
super();
EStyleSheet.build({...COLOR_PALLETES});
this.state = {
appNavigator: null,
isLoginSessionValid: false,
}
}
checkUserAuth() {
const {isLoginSessionValid} = this.state;
setTimeout(async () => {
await setStateAsynchronous(this, {
appNavigator: createNavigator({
initialRouteName: isLoginSessionValid
? 'Home'
: 'Onboarding'
})
});
}, 1);
}
componentDidMount() {
this.unsubscribeStore = store.subscribe();
}
componentWillUnmount() {
this.unsubscribeStore && this.unsubscribeStore();
}
render(){
const AppNavigator = this.state.appNavigator;
return (
<PersistGate onBeforeLift={() => this.checkUserAuth()} loading={null} persistor={persistor}>
{AppNavigator ? (
<AppNavigator ref={navigatorRef => setNavigator('appNavigator', navigatorRef)}/>
) : <React.Fragment />}
</PersistGate>
);
}
};
export default App;
src/appRedux/index.js
import {persistStore, persistReducer, createMigrate} from 'redux-persist';
import AsyncStorage from '@react-native-community/async-storage';
import {createStore, applyMiddleware, compose} from 'redux';
import Thunk from 'redux-thunk';
import reducers from './reducers';
import migration from './migrations';
import {packageJson} from 'utils/utils';
const persistConfig = {
key: 'root',
storage: AsyncStorage,
version: packageJson().reduxPersistVersion,
migrate: createMigrate(migration, {debug: __DEV__})
};
const persistedReducer = persistReducer(persistConfig, reducers);
const composeEnhancers = process.env.NODE_ENV !== 'production' && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ : compose;
export const store = createStore(persistedReducer, composeEnhancers(applyMiddleware(Thunk)));
export const persistor = persistStore(store);
package.json
{
"name": "APPNAME",
"version": "APPVERSION",
"private": true,
"reduxPersistVersion": 8,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^1.2.30",
"@fortawesome/free-solid-svg-icons": "^5.14.0",
"@fortawesome/react-fontawesome": "^0.1.11",
"@fortawesome/react-native-fontawesome": "^0.2.5",
"@react-native-community/async-storage": "^1.11.0",
"@react-native-community/masked-view": "^0.1.10",
"prop-types": "^15.7.2",
"react": "16.13.1",
"react-native": "0.63.2",
"react-native-dash": "0.0.11",
"react-native-divider": "^1.0.3",
"react-native-dotenv": "^0.2.0",
"react-native-extended-stylesheet": "^0.12.0",
"react-native-gesture-handler": "^1.7.0",
"react-native-localization": "^2.1.6",
"react-native-reanimated": "^1.10.1",
"react-native-safe-area-context": "^3.1.1",
"react-native-screens": "^2.9.0",
"react-native-size-matters": "^0.3.0",
"react-native-spinkit": "^1.5.0",
"react-native-svg": "^12.1.0",
"react-native-svg-transformer": "^0.14.3",
"react-navigation": "^4.4.0",
"react-navigation-stack": "^2.8.2",
"react-redux": "^7.2.1",
"redux": "^4.0.5",
"redux-persist": "^6.0.0",
"redux-thunk": "^2.3.0"
},
"devDependencies": {
"@babel/core": "^7.10.5",
"@babel/runtime": "^7.10.5",
"@react-native-community/eslint-config": "^2.0.0",
"babel-jest": "^26.1.0",
"babel-plugin-module-resolver": "^4.0.0",
"eslint": "^7.5.0",
"jest": "^26.1.0",
"metro-react-native-babel-preset": "^0.61.0",
"react-test-renderer": "16.13.1"
},
"jest": {
"preset": "react-native"
}
}
babel.config.js
module.exports = {
presets: ['module:metro-react-native-babel-preset', 'module:react-native-dotenv'],
plugins: [
[
'module-resolver',
{
root: ['./src'],
alias: {
localization: "./src/localization",
utils: "./src/utils",
views: "./src/views",
components: "./src/components",
assets: "./src/assets",
reduxCore: './src/appRedux'
},
},
],
],
}
从babel别名中删除'redux'并运行'react native start--reset cache'