React天气应用首次启动从Redux Store读取数据异常问题

我开发了一款天气应用，启动逻辑是：通过IP请求确定城市，将城市信息保存到Redux Store，随后立即请求并显示该城市的天气。

但遇到以下问题：首次运行时error字段为true（React DevTools检查显示状态已填充正确数据），导致应用直接进入错误页面无法启动；刷新页面后一切正常。怀疑该问题与redux-persist的配置有关。

组件核心代码 #

const { isPending, days, error, currentDayWeather } =
    useTypedSelector((state) => state.weather)
const weatherCity = useTypedSelector(
    (state) => state.weather.weather?.city,
)
const userCity = useTypedSelector(
    (state: any) => state.location?.location?.city?.name_en,
)
const { service } = useTypedSelector(
    (state) => state.service,
)

useLayoutEffect(() => {
    dispatch(getGeolocation())
}, [])

useEffect(() => {
    dispatch(getWeather(userCity))
}, [userCity])

useEffect(() => {
    setSelected(0)
}, [weatherCity])

if (isPending || !weatherCity) return <Loading />
if (!days || error) return <ErrorLoader />

return (
    <WeatherWrapper>
        <WeatherMain
            params={weatherCity}
            currentWeather={currentDayWeather}
        />
        <WeatherListCard>
            {days.map((item: ResultDaysType, index: number) => (
                <WeatherItem
                    key={uuidv4()}
                    day={index}
                    weatherData={item}
                    active={selected === index}
                    onChangeSelected={setSelected}
                />
            ))}
        </WeatherListCard>
        {service === SERVICES[1] && <ChartWeather />}
    </WeatherWrapper>
)

store.ts 配置代码 #

...
const persistedReducer = persistReducer(persistConfig, rootReducer)

const configureStore = () =>
    createStore(
        persistedReducer,
        composeEnhancers(applyMiddleware(thunk)),
    )

const store = configureStore()
const persistor = persistStore(store)

export { store, persistor }

Reducers 代码 #

locationReducer #

export const locationReducer = (
    state = initialState,
    action: { location: any, type: string },
): initialStateType => {
    const { location, type } = action

    switch (type) {
        case TYPES.GET_LOCATION:
            return {
                ...state,
                location
            }
        default: {
            return state
        }
    }
}

weatherReducer #

export const weatherReducer = (
    state = initialState,
    action: any,
): initialStateType => {
    const {
        weather, days, isPending, error, type,
    } = action

    switch (type) {
        case TYPES.SET_WEATHER:
            return {
                ...state,
                weather,
                days
            }
        case TYPES.SET_WEATHER_HOURLY:
            return {
                ...state,
                weatherHourly: weather,
            }
        case TYPES.SET_PENDING:
            return {
                ...state,
                isPending
            }
        case TYPES.SET_ERROR:
            return {
                ...state,
                error
            }
        case TYPES.CHANGE_DAY:
            return {
                ...state,
                currentDayWeather: state?.days![action.payload] ?? false,
                weatherOnHours: {
                    temp: state?.days![action.payload].weather.map((temp) => Math.round(+temp.main.temp)) ?? false,
                    date: state?.days![action.payload].weather.map((temp) => temp.dt_txt) ?? false,
                },
            }
        default: {
            return state
        }
    }
}

Thunk 异步逻辑代码 #

export const getWeather = (city: string): ThunkType<ActionsTypes<typeof actions>> => async (dispatch) => {
    try {
        dispatch(actions.setPending(true))
        dispatch(actions.setError(false))

        const weather = await weatherApi.getWeather(city)

        dispatch(actions.setWeather(weather))
        dispatch(actions.changeDay(0))
    } catch (error: unknown) {
        dispatch(actions.setError(true))
    } finally {
        dispatch(actions.setPending(false))
    }
}

内容的提问来源于stack exchange，提问作者qwfrjk