React集成Redux：通过Node API加载MongoDB数据至Redux Store

看起来你已经搞定了后端的Node API和MongoDB，现在要给你的第一个React应用加Redux来管理棒球数据的状态对吧？我用Redux Toolkit（现在官方推荐的Redux开发方式，比传统写法简洁太多）来给你一步步拆解：

第一步：安装必要依赖 #

首先在你的React项目里安装Redux Toolkit和React-Redux：

npm install @reduxjs/toolkit react-redux

第二步：创建MLB数据的Redux Slice #

在src/features/mlb/mlbSlice.js（可自行调整路径）里创建切片，用来管理数据的加载、成功、失败状态，以及异步获取数据的逻辑：

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
// 导入你原来的异步函数
import { get_mlb_ids_logos_colors } from '../../path-to-your-api-functions';

// 创建异步Thunk来获取MLB数据
export const fetchMlbData = createAsyncThunk(
  'mlb/fetchData',
  async () => {
    const response = await get_mlb_ids_logos_colors();
    return response; // 这个返回值会作为action的payload
  }
);

const mlbSlice = createSlice({
  name: 'mlb',
  initialState: {
    data: [],
    status: 'idle', // idle | loading | succeeded | failed
    error: null
  },
  reducers: {},
  // 处理异步Thunk的三种状态：pending、fulfilled、rejected
  extraReducers: (builder) => {
    builder
      .addCase(fetchMlbData.pending, (state) => {
        state.status = 'loading';
      })
      .addCase(fetchMlbData.fulfilled, (state, action) => {
        state.status = 'succeeded';
        state.data = action.payload;
      })
      .addCase(fetchMlbData.rejected, (state, action) => {
        state.status = 'failed';
        state.error = action.error.message;
      });
  }
});

export default mlbSlice.reducer;

第三步：配置Redux Store #

在src/app/store.js里创建全局store：

import { configureStore } from '@reduxjs/toolkit';
import mlbReducer from '../features/mlb/mlbSlice';

export const store = configureStore({
  reducer: {
    mlb: mlbReducer // 把MLB切片的reducer加入store
  }
});

第四步：在React应用中注入Store #

修改你的根组件（比如src/index.js），用Provider包裹整个应用，让所有组件都能访问Redux store：

import React from 'react';
import ReactDOM from 'react-dom/client';
import { Provider } from 'react-redux';
import { store } from './app/store';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>
);

第五步：在组件中使用Redux状态 #

现在你可以在任何组件里获取MLB数据、触发异步请求了，比如在src/components/MlbData.js里：

import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { fetchMlbData } from '../features/mlb/mlbSlice';

export default function MlbData() {
  const dispatch = useDispatch();
  const mlbState = useSelector((state) => state.mlb);
  const { data, status, error } = mlbState;

  // 组件挂载时触发数据请求
  useEffect(() => {
    if (status === 'idle') {
      dispatch(fetchMlbData());
    }
  }, [status, dispatch]);

  // 根据状态渲染不同内容
  if (status === 'loading') {
    return <div>加载中...</div>;
  }

  if (status === 'failed') {
    return <div>加载失败：{error}</div>;
  }

  return (
    <div>
      <h2>MLB 球队数据</h2>
      <ul>
        {data.map((team) => (
          <li key={team.id}>
            <img src={team.logo} alt={team.name} />
            <span>{team.name}</span>
            <span style={{ color: team.primaryColor }}>主色调</span>
          </li>
        ))}
      </ul>
    </div>
  );
}

补充优化你的异步函数 #

你的原始get_mlb_ids_logos_colors函数需要确保正确返回解析后的JSON数据，建议补充错误处理：

export async function get_mlb_ids_logos_colors() {
  return fetch('/mlb/mlb_ids_logos_colors')
    .then(resp => {
      if (!resp.ok) throw new Error(`请求失败：${resp.statusText}`);
      return resp.json();
    });
}

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