如何将Axios获取的API数据存储到Redux store并分发到UI组件

以下基于Redux Toolkit（你当前默认的counter slice模板就是基于这个框架的）实现：

步骤1：新增语言管理的Slice #

新建文件src/features/language/languageSlice.js，代码如下：

import { createSlice } from '@reduxjs/toolkit';

const initialState = {
  list: [], // 存储接口返回的语言列表
  loading: false,
  error: null,
};

const languageSlice = createSlice({
  name: 'language',
  initialState,
  reducers: {
    fetchStart: (state) => {
      state.loading = true;
      state.error = null;
    },
    fetchSuccess: (state, action) => {
      state.loading = false;
      state.list = action.payload; // 这里存储接口返回的res.data
    },
    fetchFail: (state, action) => {
      state.loading = false;
      state.error = action.payload;
    }
  }
});

// 导出操作方法供后续调用
export const { fetchStart, fetchSuccess, fetchFail } = languageSlice.actions;
// 导出reducer用于注册到全局store
export default languageSlice.reducer;

步骤2：将language reducer注册到全局Store #

找到你的store配置文件，默认路径为src/app/store.js，修改如下：

import { configureStore } from '@reduxjs/toolkit';
import counterReducer from '../features/counter/counterSlice';
// 导入刚创建的language reducer
import languageReducer from '../features/language/languageSlice';

export const store = configureStore({
  reducer: {
    counter: counterReducer,
    // 新增language模块
    language: languageReducer,
  },
});

步骤3：修改数据获取逻辑，请求成功后将数据存入Redux #

推荐将你的请求逻辑改写成Redux Thunk异步action，修改FetchLanguageList代码如下：

import API from '你的API封装文件的实际路径';
import { fetchStart, fetchSuccess, fetchFail } from './languageSlice';

// 异步请求方法，后续直接在组件里通过dispatch触发
export const FetchLanguageList = () => async (dispatch) => {
  dispatch(fetchStart());
  try {
    const res = await API.get(`en/restaurants/1/languages`);
    // 请求成功后把返回数据存入store
    dispatch(fetchSuccess(res.data));
  } catch (err) {
    dispatch(fetchFail(err.message));
    console.warn(err);
  }
};

步骤4：UI组件获取并渲染数据 #

在需要使用语言列表的UI组件中，通过Redux提供的钩子触发请求、读取存储的数据即可：

import { useDispatch, useSelector } from 'react-redux';
import { FetchLanguageList } from '你存放FetchLanguageList的文件路径';
import { useEffect } from 'react';

const YourUIComponent = () => {
  const dispatch = useDispatch();
  // 从store中读取语言列表、加载状态、错误信息
  const { list: languageList, loading, error } = useSelector(state => state.language);

  // 组件挂载时触发请求
  useEffect(() => {
    dispatch(FetchLanguageList());
  }, [dispatch]);

  if (loading) return <div>加载中...</div>;
  if (error) return <div>加载失败：{error}</div>;

  return (
    <div>
      <h3>支持的语言列表</h3>
      <ul>
        {languageList.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default YourUIComponent;

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