我正在尝试在代码中实现redux-persist。完成所有设置后，尝试更改状态时出现错误。
这是我的reducers.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);
这是我在Settings.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
}
}
谢谢。