How to set database values to react-redux state values

Question

I am using react-redux and trying to pre-populate a form with values if it has previously been filled out. So there is an api endpoint that I am getting the pre-populated form values(currently stored in state)like this.

  componentDidMount() {
    const { actions } = this.props;

    getLevelOneInfo()
      .then((res) => {
        actions.setKycFormInfoFromDatabase(res);
        console.log(res)
      });

  }

I have a redux file which has action creators that are functioning and all do the whole nine yards in terms of logging the data into the redux state, however, if I referesh the page, the redux state is also refreshed. I want to store the data I get from the api endpoint into the redux store. I already created the action string SET_FORM_INFO_FROM_DATABASE Here is my redux file:

import { call, put, takeLatest } from 'redux-saga/effects';
import { getKycStatus } from '../../../api/kyc/kycStatus';
import { showNotification } from './notifications';

const STATUS_TYPES = {
  UNVERIFIED: 'UNVERIFIED',
  VERIFIED_LEVEL_1: 'VERIFIED_LEVEL_1',
  VERIFIED_LEVEL_2: 'VERIFIED_LEVEL_2'
};

const initialState = {
  kycStatus: STATUS_TYPES.UNVERIFIED,
  kycStatusLoaded: false,
  kycForm: {
    firstName: '',
    lastName: '',
    address: '',
    city: '',
    region: '',
    country: '',
    postalCode: '',
    phone: '',
    smsCode: '',
    dob: '',
  },
  orderForm: {
    checkBoxStatus: false
  },
  kycFormLoaded: false,
  kycShowSmsNotification: false,
  kycShowFormSubmissionNotification: false
};

/* *********************************************** Actions *********************************************** */
const FETCH_KYC_STATUS = 'global/FETCH_KYC_STATUS';
const SET_KYC_STATUS = 'global/SET_KYC_STATUS';
const SHOW_SMS_NOTIFICATION = 'global/SHOW_SMS_NOTIFICATION';
const SET_FIRST_NAME = 'global/SET_FIRST_NAME';
const SET_LAST_NAME = 'global/SET_LAST_NAME';
const SET_ADDRESS = 'global/SET_ADDRESS';
const SET_CITY = 'global/SET_CITY';
const SET_REGION = 'global/SET_REGION';
const SET_COUNTRY = 'global/SET_COUNTRY';
const SET_POSTAL_CODE = 'global/SET_POSTAL_CODE';
const SET_PHONE = 'global/SET_PHONE';
const SET_SMS_CODE = 'global/SET_SMS_CODE';
const SET_DATE_OF_BIRTH = 'global/SET_DATE_OF_BIRTH';
const SET_AGREED_TO_TERMS = 'global/SET_AGREED_TO_TERMS';
const SHOW_KYC_SUBMISSION_NOTIFICATION = 'global/SHOW_KYC_SUBMISSION_NOTIFICATION';
const SET_KYC_INFO_FROM_DATABASE = 'global/SET_KYC_INFO_FROM_DATABASE';


/* ******************************************* Actions Creators ****************************************** */
function fetchKycStatus() {
  return {
    type: FETCH_KYC_STATUS
  };
}

function setKycStatus(statusType) {
  return {
    type: SET_KYC_STATUS,
    statusType
  };
}

function showSmsNotification(data) {
  return {
    type: SHOW_SMS_NOTIFICATION,
    data
  };
}

function showKycSubmissionNotification(data) {
  return {
    type: SHOW_KYC_SUBMISSION_NOTIFICATION,
    data
  };
}

function setFirstName(firstName) {
  return {
    type: SET_FIRST_NAME,
    firstName
  };
}

function setLastName(lastName) {
  return {
    type: SET_LAST_NAME,
    lastName
  };
}

function setAddress(address) {
  return {
    type: SET_ADDRESS,
    address
  };
}

function setCity(city) {
  return {
    type: SET_CITY,
    city
  };
}

function setRegion(region) {
  return {
    type: SET_REGION,
    region
  };
}

function setCountry(country) {
  return {
    type: SET_COUNTRY,
    country
  };
}

function setPostalCode(postalCode) {
  return {
    type: SET_POSTAL_CODE,
    postalCode
  };
}

function setPhone(phone) {
  return {
    type: SET_PHONE,
    phone
  };
}

function setSmsCode(smsCode) {
  return {
    type: SET_SMS_CODE,
    smsCode
  };
}

function setDateOfBirth(dob) {
  return {
    type: SET_DATE_OF_BIRTH,
    dob
  };
}

function setAgreedToTerms(checkBoxStatus) {
  return {
    type: SET_AGREED_TO_TERMS,
    checkBoxStatus
  };
}

function setKycFormInfoFromDatabase(
  firstName,
  lastName,
  address,
  city,
  region,
  country,
  postalCode,
  phone,
  smsCode,
  dob,
) {
  return {
    type: SET_KYC_INFO_FROM_DATABASE,
    firstName,
    lastName,
    address,
    city,
    region,
    country,
    postalCode,
    phone,
    smsCode,
    dob,
  };
}
/* *********************************************** Reducers *********************************************** */
function reducer(state = initialState, action = {}) {
  switch (action.type) {
    case SET_KYC_INFO_FROM_DATABASE:
      return {
        ...state,
        kycForm: {
          ...state.kycForm,
          firstName: action.firstName,
          lastName: action.lastName,
          address: action.address,
          city: action.city,
          region: action.region,
          country: action.country,
          postalCode: action.postalCode,
          phone: action.phone,
          smsCode: action.smsCode,
          dob: action.dob
        },
      };
    case SET_FIRST_NAME:
      return {
        ...state,
        kycForm: {
          ...state.kycForm,
          firstName: action.firstName
        }
      };
    case SET_LAST_NAME:
      return {
        ...state,
        kycForm: {
          ...state.kycForm,
          lastName: action.lastName
        }
      };
    case SET_COUNTRY:
      return {
        ...state,
        kycForm: {
          ...state.kycForm,
          country: action.country
        }
      };
    case SET_REGION:
      return {
        ...state,
        kycForm: {
          ...state.kycForm,
          region: action.region
        }
      };
    case SET_POSTAL_CODE:
      return {
        ...state,
        kycForm: {
          ...state.kycForm,
          postalCode: action.postalCode
        }
      };
    case SET_ADDRESS:
      return {
        ...state,
        kycForm: {
          ...state.kycForm,
          address: action.address
        }
      };
    case SET_CITY:
      return {
        ...state,
        kycForm: {
          ...state.kycForm,
          city: action.city
        }
      };
    case SET_DATE_OF_BIRTH:
      return {
        ...state,
        kycForm: {
          ...state.kycForm,
          dob: action.dob
        }
      };
    case SET_PHONE:
      return {
        ...state,
        kycForm: {
          ...state.kycForm,
          phone: action.phone
        }
      };
    case SET_SMS_CODE:
      return {
        ...state,
        kycForm: {
          ...state.kycForm,
          smsCode: action.smsCode
        }
      };
    case SET_KYC_STATUS:
      return {
        ...state,
        kycStatus: STATUS_TYPES[action.statusType],
        kycStatusLoaded: true
      };
    case SHOW_SMS_NOTIFICATION:
      return {
        ...state,
        kycShowSmsNotification: true
      };
    case SHOW_KYC_SUBMISSION_NOTIFICATION:
      return {
        ...state,
        kycShowFormSubmissionNotification: true
      };
    case SET_AGREED_TO_TERMS:
      return {
        ...state,
        orderForm: {
          ...state.orderForm,
          checkBoxStatus: action.checkBoxStatus
        }
      };
    default:
      return state;
  }
}



export default reducer;

Just need to store the data from api I called from the componentDidMount and store it inside the redux store. Thanks!

Answer 1

You can create a single action for set data. It will contains all the data you want to set. And in redux just put it with spread operator (like...action.payload)