react-nativereact-redux-form

Unable to store data in redux store -Data disappears after refreshing the page


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;

Solution

  • To persist your data you need to use redux-persist.

    here is the Github link