Получение undefined не является объектом (оценивается как _reducers.default.dispatch) с redux-persist

Question

Я пытаюсь реализовать в своем коде redux-persist.После выполнения всех настроек, я получил ошибку при попытке изменить состояние.

Вот мой код в моем файле redurs.js:

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

    case CHANGE_TITLE:
        return (Object.assign({}, state, {
            itemTitle: action.title
        }))

    case CHANGE_SUBTITLE:
        return (Object.assign({}, state, {
            itemSubtitle: action.subtitle
        }))

    case CHANGE_KEY:
        return (Object.assign({}, state, {
            itemKey: action.key
        }))

    case CHANGE_LIST_ITEM:
        return (Object.assign({}, state, {
            itemKey: (action.itemData)[0],
            itemTitle: (action.itemData)[1],
            itemSubtitle: (action.itemData)[2]
        }))

    case ADD_RESPONSE_DATA:
        return(Object.assign({}, state, {
            itemWord: action.data.word,
            itemPartOfSpeech: action.data.partOfSpeech,
            itemPronunciation: action.data.pronunciation,
            itemFrequency: action.data.frequency,
            itemDef: action.data.definition,
            displayRandomWord: 'flex',
            displayButtons: 'flex',
            buttonRightIconName: 'x-circle',
            buttonRightIconType: 'foundation',
            buttonRightTitle: "I don't know this",
            buttonLeftIconName: 'checkbox-marked-circle',
            buttonLeftIconType:'material-community',
            buttonLeftTitle:"I know this",            
            displayWordDefinition: 'none'
        }))

    case RESET_RESPONSE_DATA:
        return(Object.assign({}, state, {
            itemWord: '',
            itemPartOfSpeech: '',
            itemPronuncitation: '',
            itemFrequency: '',
            itemDef: '',
            displayRandomWord: 'none',
            displayButtons: 'none',
            displayWordDefinition: 'none',
            buttonRightIconName: 'x-circle',
            buttonRightIconType: 'foundation',
            buttonRightTitle: "I don't know this",

        }))

        case DISPLAY_WORD_DEFINITION:
            return(Object.assign({}, state, {
                displayWordDefinition: 'flex',
                buttonRightIconName: 'checkbox-marked-circle',
                buttonRightIconType: 'material-community',
                buttonRightTitle: 'Got it',
                buttonLeftIconName: 'x-circle',
                buttonLeftIconType:'foundation',
                buttonLeftTitle:"Not interested",

            }))

        case UPDATE_INDEX:
            return(Object.assign({}, state, {
                selectedIndex: action.data
            }))

        case UPDATE_STARTING_LETTERS_CHKBOX:
            return(Object.assign({}, state, {
                startingLettersChecked: !(state.startingLettersChecked)
            }))

        case UPDATE_ENDING_LETTERS_CHKBOX:
        return(Object.assign({}, state, {
            endingLettersChecked: !(state.endingLettersChecked)
        }))
    default:
        return state
}
}

const persistedReducer = persistReducer(persistConfig, reducer)

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

Вот код в моем файле App.js:

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

const HomeTabStackNavigator = createStackNavigator({
  Home: Home,
  RandomPractice: {
screen: RandomPractice
  },
  ReviewVocabulary: {
screen: Startup
  }
},
{
  defaultNavigationOptions: {
headerStyle: {
  backgroundColor: AppConstants.APP_PRIMARY_COLOR
},
headerTintColor: AppConstants.COLOR_WHITE,
headerRight: (
  <View>
    <Menu>
      <MenuTrigger>
      <Icon name='more-vert' color={AppConstants.COLOR_WHITE} />
       </MenuTrigger>
       <MenuOptions>
         <MenuOption text={AppConstants.STRING_PREFERENCES} />
         <MenuOption text={AppConstants.STRING_ABOUT} />
       </MenuOptions>
    </Menu>
  </View>
)
  },
  initialRouteName: 'Home'
})

const TabAppNavigator = createMaterialBottomTabNavigator({
  HomeTabStackNavigator: {
    screen: HomeTabStackNavigator,
    navigationOptions: {
      tabBarLabel: AppConstants.STRING_TAB_HOME,
      tabBarIcon: <Icon name= 'home' />
    }
  },
  MyVocabulary: MyVocabulary,
  Settings: Settings,
    },
    {
      initialRouteName: 'HomeTabStackNavigator',
    })

const StackAppNavigator = createStackNavigator({
  TabAppNavigator: {
    screen: TabAppNavigator,
  }
},
  {
    defaultNavigationOptions: {
      header: null,
    }
  })

const AppContainer = createAppContainer(StackAppNavigator);

Вот код в моих настройкахФайл компонента .js, в котором я пытаюсь изменить состояние:

import React from 'react';
import { StyleSheet, View, Text } from 'react-native';
import { connect } from 'react-redux'
import store from '../reducers'
import { Icon, CheckBox, Input, ButtonGroup, Button } from 'react-native-elements'
import firebase, { } from 'react-native-firebase'

import AppConstants from '../Constants'
import { updateIndex, updateStartingLettersCheckBox, updateEndingLettersCheckBox } from '../actions'

const wordsDetailsCollection = firebase.firestore().collection('wordsDetails')
const wordsCollection = firebase.firestore().collection('words')

class Settings extends React.Component {

    static navigationOptions = {
        tabBarLabel: AppConstants.STRING_TAB_SETTINGS,
        tabBarIcon: <Icon name= 'settings' />
    }

    updateIndex = (selectedIndex) => {
    store.dispatch(updateIndex(selectedIndex))
    }

    partOfSpeechAll = () => <Text>All</Text>
    partOfSpeechVerb = () => <Text>Verb</Text>
    partOfSpeechNoun = () => <Text>Noun</Text>
    partOfSpeechAdjective = () => <Text>Adjective</Text>

    render() {
        const buttons = [{ element: this.partOfSpeechAll }, { element: this.partOfSpeechVerb }, { element: this.partOfSpeechNoun }, { element: this.partOfSpeechAdjective }]
        const { selectedIndex } = this.props

        return(
            <View style={styles.container}>
                <CheckBox
                    title= 'Words starting with'
                    checked= {this.props.startingLettersChecked}
                    onPress= {this.startingLettersPressed}
                />
                <Input
                    placeholder= 'Enter starting letters'
                    containerStyle={{marginBottom: 16, display: this.inputDisplay('startingLetters')}}
                />
                <CheckBox
                    title= 'Words ending with'
                    checked= {this.props.endingLettersChecked}
                    onPress= {this.endingLettersPressed}
                />
                <Input
                    placeholder= 'Enter ending letters'
                    containerStyle={{marginBottom: 16, display: this.inputDisplay('endingLetters')}}
                />
                <Text style={{marginBottom: 8}}>Part of speech</Text>
                <ButtonGroup
                    onPress={this.updateIndex}
                    buttons={buttons}
                    selectedIndex={selectedIndex}
                    containerStyle={{marginBottom: 16}}
                />
                <Button 
                    title='Clear vocabulary'
                    icon={<Icon name='playlist-remove' type='material-community' color='red'/>}
                    onPress={clearVocabulary}/>
            </View>
        )
    }

    componentDidMount() {

    }

    startingLettersPressed = () => {
        store.dispatch(updateStartingLettersCheckBox())
    }

    endingLettersPressed = () => {
        store.dispatch(updateEndingLettersCheckBox())
    }

    inputDisplay = (checkBoxType) => {
        switch(checkBoxType) {
                case 'startingLetters':
                return (this.props.startingLettersChecked ? 'flex' : 'none')

            case 'endingLetters':
                return (this.props.endingLettersChecked ? 'flex' : 'none')

            default:
                return 'none'
        }
    }
}

export default connect(mapStateToProps)(Settings)

const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: '#fff',
      alignItems: 'center',
      justifyContent: 'flex-start',
      padding: 8
    },
  });

  function mapStateToProps(state) {
      return {
        selectedIndex: state.selectedIndex,
        startingLettersChecked: state.startingLettersChecked,
        endingLettersChecked: state.endingLettersChecked

      }
  }

Заранее спасибо.