如何使用 react-redux 解决“无法解析模块”问题？

Posted 2023-02-19

【中文标题】如何使用 react-redux 解决“无法解析模块”问题？

【英文标题】：How to solve "Unable to resolve module" issue with react-redux?

【发布时间】：2020-12-01 23:23:55

【问题描述】：

我正在使用 Expo 构建一个 react-native 应用程序，当我进行重构工作时，突然我无法使用 Expo 客户端打开我的应用程序，它显示错误

TypeError: (0, _redux.combinReducers) is not a function. (In '(0, _redux.combineReducers)(reducers)', '(0, _redux.combineReducers)' is undefined)

经过一番研究，我发现这个问题的原因是与redux的文件夹名称相同，我也犯了这个错误，所以我将文件夹名称更改为“appRedux”，然后错误消息更改为

Unable to resolve "../../../../src/redux" from "node_modules\react-redux\lib\connect\mapDispatchToProps.js"

我确定我已经按照this solution 所说的那样将我的 App 组件包装在 Provider 中，但是没有运气解决它。

我在这里卡了几天，请帮我解决这个问题，如果需要更多信息，请告诉我，任何建议都非常感谢。

App.js

import React,  Component  from 'react';
import Navigation from './src/navigation'
import  Provider  from 'react-redux'
import  getStore, getPersistor  from './src/store/configureStore'
import  PersistGate  from 'redux-persist/integration/react'
import  SafeAreaProvider  from 'react-native-safe-area-context'
import  ApolloProvider  from '@apollo/react-hooks'
import  getClient  from './src/services/GraphQL/Client'

const store = getStore()
const persistor = getPersistor()
const client = getClient()

export default class App extends Component 
  render() 
    return (
      <ApolloProvider client=client>
        <Provider store=store >
          <PersistGate persistor=persistor>
            <SafeAreaProvider>
              <Navigation />
            </SafeAreaProvider>
          </PersistGate>
        </Provider>
      </ApolloProvider>
    );
  

configureStore.js

import  createStore, applyMiddleware  from 'redux'
import  persistStore  from 'redux-persist'
import reducers from '@redux'
import thunk from 'redux-thunk'

const store = createStore(reducers, applyMiddleware(thunk))
const persistor = persistStore(store)

const getPersistor = () => persistor
const getStore = () => store

export 
    getStore,
    getPersistor

Reducers.js

import  combineReducers  from 'redux'
import  persistCombineReducers, persistReducer  from 'redux-persist'
import  AsyncStorage  from 'react-native'

import carts from './carts'
import app from './app'
import user from './user'

const rootConfig = 
    key: 'root',
    storage: AsyncStorage,
    blacklist: [
        'app',
        'carts',
        'user'
    ]


const appConfig = 
    key: 'app',
    storage: AsyncStorage,
    blacklist: [
        'selectedDate',
        'selectedDateIndex',
        'isFetching',
        'showFilter'
    ]


const cartConfig = 
    key: 'carts',
    storage: AsyncStorage,
    blacklist: [
        'isFetching',
        'error'
    ]


const userConfig = 
    key: 'user',
    storage: AsyncStorage,
    blacklist: [
        'isFetching',
        'error',
        'history'
    ]


export default persistCombineReducers(rootConfig, 
    app: persistReducer(appConfig, app),
    carts: persistReducer(cartConfig, carts),
    user: persistReducer(userConfig, user)
)

【参考方案1】：

最后我通过启动 expo 客户端解决了这个问题

expo start -c

这将启动 expo 应用程序并清除缓存，希望这会帮助面临同样问题的人