TypeError: undefined is not an object (evaluating '_react3.PersistGate')

[Arjun-Aggarwal]

I am trying to a use a very basic persistor, but I am getting this error: TypeError: undefined is not an object (evaluating '_react3.PersistGate') Here is my code: This is the main app

import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react'
. . .
export default class App extends React.Component {
  render() {
    return (
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <AppNavigator />
      </PersistGate>
    </Provider>
    );
  }
}

This is the store:

import { createStore } from 'redux';
import { addCustomer } from './actions';
import reducer from './reducer';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';

const persistConfig = {
  key: 'root',
  storage,
};

const persistedReducer = persistReducer(persistConfig, reducer);

export const store = createStore(persistedReducer);
export const persistor = persistStore(store);

store.dispatch(addCustomer({ name: 'xyz', amount: 500 }));
store.dispatch(addCustomer({ name: 'abc', amount: 600 }));
store.dispatch(addCustomer({ name: 'pqr', amount: 600 }));

Can somebody explain where I am going wrong

[iampreethamveigas]

May be your initial returning state is null where as it must be a object or your reducers are passing a null value instead a object

[Arjun-Aggarwal]

I am kind of new to this, so can you explain how I might resolve the error. Thanks a lot

[iampreethamveigas]

could you show your reducer and action structure else it is hard to figure out.

[Arjun-Aggarwal]

Can a persistor be used without using middleware? Because I'm not using any middleware.

[iampreethamveigas]

yeah it depends on your code flow basically middlewares are supporters which are made to write code easy and short. and your dispatch(addcustomer) suppose to be in mainapp.js inside render method for your code structure

[Arjun-Aggarwal]

This is my reducer code:

import {combineReducers} from 'redux'
import {ADD_CUSTOMER, ADD_TRANSACTION} from './actions'

const merge = (prev, next) => Object.assign({}, prev, next)

const customerReducer = (state = [], action) => {
  switch(action.type){
    case ADD_CUSTOMER: 
      return [...state, action.payload]
    case ADD_TRANSACTION:
      return state.forEach(customer => {
        if (customer.name === action.payload.name)
        {
          customer.amount += action.payload.amount
        }
      })
    default:
      return state
    }
}

const transactionReducer = (state = [], action) => {
  switch(action.type){
    case ADD_CUSTOMER: 
      return [...state, action.payload]
    case ADD_TRANSACTION:
      return merge(state, action.payload)
    default:
      return state
  }
}

const reducer = combineReducers({
  customers: customerReducer,
  transactions: transactionReducer,
})

export default reducer

and these are my actions:

//action types
export const ADD_STORE_DETAILS = 'ADD_STORE_DETAILS';

//action creators
export const addStoreDetails = details => ({
  type: ADD_STORE_DETAILS,
  payload: details,
});

Thanks for the help

[Arjun-Aggarwal]

sorry I posted the wrong actions code. The correct one is this:

// action types
export const ADD_CUSTOMER = 'ADD_CUSTOMER'
export const ADD_TRANSACTION = 'ADD_TRANSACTION'

// action creators
export const addCustomer = newCustomer =>({
  type: ADD_CUSTOMER,
  payload: newCustomer
})

[iigorg]

Hi! Did you resolve the issue? I have the same problem(((

[Arjun-Aggarwal]

Yeah, I was using snack.expo to work on my app, which does not support react persist. I switched to expo-cli and it started working

[iigorg]

thank you very much