React + Redux：设置Redux状态或更改Redux状态后，页面未重新呈现

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);
}

我的componentDidMount（）

componentDidMount()
{

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

}

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

Answer 1

在componentDidMount上执行网络通话，并期望countryList中有更新的componentDidUpdate。

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

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