undefined is not an object (evaluating '_reducers.default.dispatch')

[Bradzer]

I'm trying to implement redux-persist in my code. After doing all the setup, I got the error when trying to change the state.

Here's my code in my reducers.js file:

import { createStore } from 'redux'
import { persistStore, persistReducer } from 'redux-persist'
import FilesystemStorage from 'redux-persist-filesystem-storage'

import { CHANGE_TITLE, CHANGE_SUBTITLE, CHANGE_KEY, CHANGE_LIST_ITEM, ADD_RESPONSE_DATA, RESET_RESPONSE_DATA, DISPLAY_WORD_DEFINITION, UPDATE_INDEX, UPDATE_STARTING_LETTERS_CHKBOX, UPDATE_ENDING_LETTERS_CHKBOX } from './actions'

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

const initialState = {
itemDef: '',
itemSynonyms: '',
itemExamples: '',
itemWord: '',
itemPartOfSpeech: '',
itemPronunciation: '',
itemFrequency: '',
displayRandomWord: 'none',
displayButtons: 'none',
displayWordDefinition: 'none',
buttonRightIconName: 'x-circle',
buttonRightIconType: 'foundation',
buttonRightTitle: "I don't know this",
buttonLeftIconName: 'checkbox-marked-circle',
buttonLeftIconType:'material-community',
buttonLeftTitle:"I know this",
selectedIndex: 0,
startingLettersChecked: false,
endingLettersChecked: false
}

const reducer = (state = initialState, action) => {
switch(action.type) {
// my actions
}

const persistedReducer = persistReducer(persistConfig, reducer)

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

And here's my App.js file :

import React from 'react';
import { View } from 'react-native';
import { createStackNavigator, createAppContainer } from 'react-navigation';
import { createMaterialBottomTabNavigator } from 'react-navigation-material-bottom-tabs';
import { MenuProvider, Menu, MenuOptions, MenuOption, MenuTrigger, } from 'react-native-popup-menu';
import { Icon } from 'react-native-elements'
import { Provider } from 'react-redux'
import { PersistGate } from 'redux-persist/integration/react'

import Home from './components/Home'
import MyVocabulary from './components/MyVocabulary'
import Settings from './components/Settings'
import RandomPractice from './components/RandomPractice'
import Startup from './components/Startup'
import AppConstants from './Constants'
import { store, persistor }from './reducers'

export default class App extends React.Component {

  render() {
    return (
  <Provider store={store}>
  <PersistGate loading={null} persistor={persistor}>
    <MenuProvider>
        <AppContainer />
      </MenuProvider>
  </PersistGate>
  </Provider>
);
  }
}

//down is my code for the navigators

What's wrong ?

Thanks in advance.

[erksch]

Is it working without redux-persist (using the normal store and reducer)? Also maybe try to wrap store creation in a function like proposed in the README in this section:

export default () => {
  let store = createStore(persistedReducer)
  let persistor = persistStore(store)
  return { store, persistor }
}

and set everything up with

import configureStore from './configureStore'
const { store, persistor } = configureStore();
... rendering and stuff  

[Bradzer]

@erksch I followed what you said and the error is gone. However, when the state is changed the screen doesn't render again. It's only when I reload the app that I can see the changes.

Any way to fix that ?