好的,所以我试图在react native中做我的第一个存储。显然使用redux。但这是我的问题,你可以看到在标题我有这个错误。这是我的代码。我想我的商店出了问题。但我也不能肯定。所以如果有人能帮我处理一下。
我的Store.Js
import AsyncStorage from '@react-native-community/async-storage';
import { createStore, applyMiddleware } from 'redux';
import { createLogger } from 'redux-logger';
import { persistStore, persistReducer } from 'redux-persist';
import {rootReducer} from '../Reducers/profilDetailReducer';
import thunk from 'redux-thunk'
// Middleware: Redux Persist Config
const persistConfig = {
key: 'root',
storage: AsyncStorage,
whitelist: [ "profilDetailReducer" ],
blacklist: [],
};
const persistedReducer = persistReducer(persistConfig, rootReducer)
const store = createStore(persistedReducer);
let persistor = persistStore(store);
export {
store,
persistor,
};
我的<<p> strong>减速器const initialState = {
profilDetails: {
name:"",
description:"",
schoolName:""
}
};
const rootReducer = (state = initialState , action) => {
switch(action.type) {
case "SAVE_PROFIL_DETAIL": {
return {
...state,
profilDetails : action.profilDetails
}
}
default: {
return state;
}
}
}
export default rootReducer;
和我的动作
export const saveProfilDetail = (profilDetails) => (
{
type:"SAVE_PROFIL_DETAIL",
profilDetails: {
name:profilDetails.name,
description:profilDetails.Desciption,
school:profilDetails.school
}
}
);
我添加我使用它的文件:
import React from 'react'
import { View, Text, TouchableOpacity, TextInput, StyleSheet } from 'react-native'
import {saveProfilDetail} from '../Actions/saveProfilDetail'
import {connect} from 'react-redux'
class Register extends React.Component {
constructor(props){
super(props)
this.state = {
name: '',
description: '',
school:''
}}
handleName = (text) => {
this.setState({ name: text })
}
handleDescription = (text) => {
this.setState({ description: text })
}
handleSchool = (text) => {
this.setState({ school: text })
}
render() {
return (
<View style = {styles.container}>
<TextInput style = {styles.input}
underlineColorAndroid = "transparent"
placeholder = "Nom"
placeholderTextColor = "#9a73ef"
autoCapitalize = "none"
onChangeText = {this.handleName}/>
<TextInput style = {styles.input}
underlineColorAndroid = "transparent"
placeholder = "Desciption"
placeholderTextColor = "#9a73ef"
autoCapitalize = "none"
onChangeText = {this.handleDescription}/>
<TextInput style = {styles.input}
underlineColorAndroid = "transparent"
placeholder = "Desciption"
placeholderTextColor = "#9a73ef"
autoCapitalize = "none"
onChangeText = {this.handleSchool}/>
<TouchableOpacity
style = {styles.submitButton}
onPress={() => {
var profilDetails = {};
profilDetails.name = this.state.name;
profilDetails.desciption = this.state.desciption;
profilDetails.school = this.state.school;
this.props.saveProfilDetail(profilDetails)
this.props.navigation.navigate("Profil")
}}>
<Text style = {styles.submitButtonText}> Submit </Text>
</TouchableOpacity>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
paddingTop: 23
},
input: {
margin: 15,
height: 40,
borderColor: '#7a42f4',
borderWidth: 1
},
submitButton: {
backgroundColor: '#7a42f4',
padding: 10,
margin: 15,
height: 40,
},
submitButtonText:{
color: 'white'
}
})
const mapDispatchToProps = (dispatch) => {
return{
saveProfileDetail:(profilDetails) => dispatch(saveProfilDetail(profilDetails))
}}
export default connect(mapDispatchToProps)(Register);
如果你还需要什么帮助,请告诉我。
仔细阅读您的代码后,我注意到您混淆了默认导入和命名导入。
在store.js
中,您有:import {rootReducer} from '../Reducers/profilDetailReducer';
在Reducer
你有:export default rootReducer;
因为你在你的文件中添加了一个DEFAULT导入,所以在你的store中应该是这样导入reducer的:import rootReducer from '../Reducers/profilDetailReducer';
你可以在这里阅读更多关于命名和默认导入的信息
我在这里用你的代码创建了一个基本的代码沙箱