[英]How to set database values to react-redux state values
我正在使用 react-redux 并尝试使用先前填写的值预先填充表单。 所以有一个 api 端点,我正在像这样获取预先填充的表单值(当前存储在状态中)。
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. 我想将从 api 端点获得的数据存储到 redux 存储中。 我已经创建了操作字符串SET_FORM_INFO_FROM_DATABASE
这是我的 redux 文件:
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;
只需要存储我从 componentDidMount 调用的 api 中的数据并将其存储在 redux 存储中。 谢谢!
您可以为集合数据创建单个操作。 它将包含您要设置的所有数据。 而在 redux 中,只需将其与扩展运算符一起放入(如...action.payload)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.