React + Redux：设置 redux state 或更改 redux state 后页面不会重新渲染

Question

我正在执行一个 api 调用函数 - getCountryList(); 使用 redux saga 在我的componentDidMount()生命周期方法中获取国家/地区列表。 这是用于在选择框内填充国家/地区列表。

函数运行并成功设置了 redux 状态，但设置后我的页面不会自动重新渲染。

我的减速机：

import { SP_TYPES } from './sp.types';
const INITIAL_STATE = {
    countryList : [],
    stateList : [],
    errorMessage : "",
    isLoading : false
}
const ServiceProviderReducer = (state = INITIAL_STATE , action) => {
    switch(action.type)
    {
        case SP_TYPES.GET_COUNTRY_LIST_START :
            return {
                ...state,
                isLoading : true
            }
        case SP_TYPES.GET_COUNTRY_LIST_SUCCESS :
            return {
                ...state,
                countryList : action.payload,
                isLoading : false
            }
        case SP_TYPES.GET_COUNTRY_LIST_FAILURE :
            return {
                ...state,
                errorMessage : action.payload,
                isLoading : false
            }
        default :
            return state;
    }
}
export default ServiceProviderReducer;

我的传奇

import { takeLatest, call, put } from 'redux-saga/effects';
import { SP_TYPES } from './sp.types';
import axios from 'axios';
import {
    getCountryListSuccess,
    getCountryListFailure
} from './sp.actions.js';

const URL = process.env.REACT_APP_BASE_URL;

const getCountryListData = async () => {
    return axios({
        method : 'get',
        url : `${URL}/get_all_countries`
    });
}
export function* getCountryListAsync()
{
    try{
        const { data } = yield call(getCountryListData);
        if(data.status === 'success')
        {
            yield put(getCountryListSuccess(data.data))
        }
        else
        {
            yield put(getCountryListFailure())
        }
    }
    catch(er)
    {
        yield put(getCountryListFailure())
    }
}
export function* getCountryListStart()
{
    yield takeLatest(SP_TYPES.GET_COUNTRY_LIST_START,getCountryListAsync);
}

我的组件

import React from 'react';
import './add-service-provider-form.styles.scss';
import { withFormik, Form, Field } from 'formik';
import * as yup from 'yup';
import { connect } from 'react-redux';
import { createStructuredSelector } from 'reselect';
import { getCountryListStart } from '../../redux/super-admin-section/SP-realted/sp.actions';
import { selectCountryList } from '../../redux/super-admin-section/SP-realted/sp.selectors';

class AddServiceProviderForm extends React.Component {
    componentDidMount()
    {
        const { getCountryList, countryList } = this.props;
        console.log('countryList', countryList);
        getCountryList();
        
    }
    render() {
        const {  errors, touched, isSubmitting } = this.props;
        return (
            <Form>

                <div className="form-group">
                    <Field type="text" className="form-control" placeholder="Name" name="name" />
                    { touched.name && errors.name && <p className="text-danger">{errors.name}</p> }
                </div>
                <div className="form-group">
                    <Field type="text" className="form-control" placeholder="Address One" name="addressOne" />
                    { touched.addressOne && errors.addressOne && <p className="text-danger">{errors.addressOne}</p> }
                </div>
                <div className="form-group">
                    <Field type="text" className="form-control" placeholder="Address Two" name="addressTwo" />
                    { touched.addressTwo && errors.addressTwo && <p className="text-danger">{errors.addressTwo}</p> }
                </div>
                <div className="form-group">
                    <Field type="text" className="form-control" placeholder="City" name="city" />
                    { touched.city && errors.city && <p className="text-danger">{errors.city}</p> }
                </div>
                <div className="form-group">
                    <Field name="country" className="form-control" as="select">
                        <option value="1">Test</option>
                        <option value="2">Test 2</option>
                    </Field>
                    { touched.country && errors.country && <p className="text-danger">{errors.country}</p> }
                </div>
                <div className="form-group">
                    <Field name="state" className="form-control" as="select">
                        <option value="1">Test 11</option>
                        <option value="2">Test 22</option>
                    </Field>
                    { touched.state && errors.state && <p className="text-danger">{errors.state}</p> }
                </div>
                <div className="form-group">
                    <Field type="text" className="form-control" placeholder="zip" name="zip" />
                    { touched.zip && errors.zip && <p className="text-danger">{errors.zip}</p> }
                </div>

                <div className="form-group">
                    <Field type="number" className="form-control" placeholder="Phone Number" name="phoneNumber" />
                    { touched.phoneNumber && errors.phoneNumber && <p className="text-danger">{errors.phoneNumber}</p> }
                </div>
                <div className="form-group">
                    <Field type="email" className="form-control" placeholder="Email" name="email" />
                    { touched.email && errors.email && <p className="text-danger">{errors.email}</p> }
                </div>
                <div className="form-group">
                    <input type="submit" className="btn btn-primary form-control" disabled={isSubmitting}/>
                </div>
            </Form>
        );
    }
}
const options = {
    mapPropsToValues() {
        return {
            name: "",
            addressOne: "",
            addressTwo: "",
            city: "",
            country: "",
            state: "",
            zip: "",
            phoneNumber: "",
            email: "",
        }
    },
    handleSubmit({ resetForm, setErrors, setSubmitting} ) {
        
    },
    validationSchema : yup.object().shape({
        name : yup.string().required('Name is required'),
        addressOne: yup.string().required('Address One is required'),
        addressTwo: yup.string().required('Address two is required'),
        city: yup.string().required('City is required'),
        country: yup.string().required('Country is required'),
        state: yup.string().required('State is required'),
        zip: yup.string().required('ZIP code is required'),
        phoneNumber: yup.string().required('Phone Number is required'),
        email: yup.string().email('Email is not valid').required('Email is required'),
    })
}

const mapDispatchToProps = dispatch => {
    return {
        getCountryList : () => dispatch(getCountryListStart())
    }
}
const mapStateToProps = createStructuredSelector({
    countryList : selectCountryList
})
export default connect(mapStateToProps, mapDispatchToProps)(withFormik(options)(AddServiceProviderForm));

国家/地区列表 redux 设置成功 Redux 记录器屏幕截图

Answer 1

执行对网络呼叫componentDidMount并期望更新countryList在componentDidUpdate 。

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

componentDidUpdate {
  const { countryList } = this.props;
  console.log('countryList', countryList);
}