Jimmy Liao
Jimmy Liao

Reputation: 21

How to solve "Unable to resolve module" issue with react-redux?

I'm building a react-native app with Expo, when I doing refactor job and suddenly I can't open my app with Expo client, it shows an error

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

after some researching I see some reason cause this issue is cause the same folder name with redux, which I made this mistake also, so I change the folder name to "appRedux", after that the error message change to

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

I'm sure I've wrapped my App component in Provider as this solution said, but just no luck to solve it.

I've been stuck in here for few days, please help me to solve this issue, if need more info please let me know, any suggestion is appreciated.

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)
})

Upvotes: 0

Views: 1661

Answers (1)

Jimmy Liao
Jimmy Liao

Reputation: 21

Finally I solve this issue by start expo client with

expo start -c

which will start expo app with clearing the cache, hope this will help someone facing the same issue

Upvotes: 1

Related Questions