I am new to react-native and learning react-redux. I went to a website and copied the exact code. The code is not storing values of email and password. When I refresh the page all the data disappears. Can anyone help me to save data in redux-store persistently? Any help would be highly appreciated. Here is my App.js
import React from 'react';
import { Provider } from 'react-redux';
import store from '../redux/store';
import Form from './components/Form';
export default function App() {
return (
<Provider store={store}>
<Form />
</Provider>
);
}
And my Form.js
import React from 'react';
import { View, Button, TextInput, StyleSheet } from 'react-native';
import { Field, reduxForm } from 'redux-form';
const Form = (props) => {
const { handleSubmit } = props;
const onSubmit = (values) => console.log(values);
const renderInput = ({ input: { onChange, ...input }, ...rest}) => {
return <TextInput style={styles.input} onChangeText={onChange} {...input} {...rest} />
};
return (
<View style={styles.root}>
<Field
name={'email'}
props={{
placeholder: 'Email'
}}
component={renderInput}
/>
<Field
name={'password'}
props={{
placeholder: 'Password',
secureTextEntry: true
}}
component={renderInput}
/>
<Button title={'Submit'} onPress={handleSubmit(onSubmit)} />
</View>
);
};
const styles = StyleSheet.create({
root: {
flex: 1,
padding: 32,
justifyContent: 'center'
},
input: {
padding: 8,
marginBottom: 8,
borderColor: 'blue',
borderWidth: 1,
borderRadius: 4
}
});
export default reduxForm({form: 'test-form'})(Form);
My store.js
import {combineReducers, createStore} from 'redux';
import {reducer as formReducer} from 'redux-form';
const rootReducer = combineReducers({
form: formReducer
});
const store = createStore(rootReducer);
export default store;
To persist your data you need to use redux-persist
.
here is the Github link