React-Redux中POST请求后，NewGroup组件如何获取新创建实体ID？

这个问题我之前做项目的时候也遇到过，给你几个实用的解决方案，看哪种更适合你的场景：

这是最常规也最省心的做法——RESTful API规范里，创建资源的POST请求通常会返回包含自动生成ID的完整资源对象。你可以利用这一点，在action里把后端返回的完整组数据传给reducer，除了更新组列表，专门在state里加一个字段（比如latestCreatedGroup）来保存刚创建的组，这样组件就能直接拿到，不用自己去列表里找。

示例代码： #

Action Creator（假设用redux-thunk处理异步）

export const createNewGroup = (groupData) => async (dispatch) => {
  try {
    const response = await fetch('/api/groups', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(groupData)
    });
    const newGroup = await response.json(); // 这里包含后端返回的ID
    dispatch({
      type: 'CREATE_GROUP_SUCCESS',
      payload: newGroup
    });
  } catch (err) {
    dispatch({ type: 'CREATE_GROUP_FAILURE', payload: err.message });
  }
};

Reducer 修改

const initialState = {
  groups: [],
  latestCreatedGroup: null,
  error: null
};

const groupReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'CREATE_GROUP_SUCCESS':
      return {
        ...state,
        groups: [...state.groups, action.payload],
        latestCreatedGroup: action.payload, // 单独存储刚创建的组
        error: null
      };
    case 'CREATE_GROUP_FAILURE':
      return { ...state, error: action.payload };
    default:
      return state;
  }
};

NewGroup 组件中获取

你的组件可以通过useSelector（或者connect）直接拿到这个最新创建的组：

import { useSelector, useDispatch } from 'react-redux';
import { createNewGroup } from './actions';
import { reduxForm, Field } from 'redux-form';

const NewGroupForm = ({ handleSubmit }) => {
  const dispatch = useDispatch();
  const latestCreatedGroup = useSelector(state => state.groups.latestCreatedGroup);

  const onSubmit = (values) => {
    dispatch(createNewGroup(values));
  };

  // 当最新组存在时，就能拿到ID做后续操作（比如跳转到详情页）
  useEffect(() => {
    if (latestCreatedGroup) {
      console.log('刚创建的组ID:', latestCreatedGroup.id);
      // history.push(`/groups/${latestCreatedGroup.id}`);
    }
  }, [latestCreatedGroup]);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      {/* redux-form的Field组件，细节无关紧要 */}
      <Field name="name" component="input" type="text" placeholder="组名" />
      <button type="submit">创建组</button>
    </form>
  );
};

export default reduxForm({ form: 'newGroup' })(NewGroupForm);

如果后端只返回新组的ID（这种情况比较少见，但也有可能），你可以在action里把ID传递给reducer，同时组件在请求成功后拿到这个ID，再去Redux的组列表里匹配对应的实体。

示例代码： #

Action Creator 调整

export const createNewGroup = (groupData) => async (dispatch) => {
  try {
    const response = await fetch('/api/groups', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(groupData)
    });
    const { id } = await response.json(); // 后端仅返回ID
    // 把ID和原数据合并，传给reducer更新列表
    dispatch({
      type: 'CREATE_GROUP_SUCCESS',
      payload: { id, ...groupData }
    });
    // thunk可以返回Promise，让组件拿到ID
    return id;
  } catch (err) {
    dispatch({ type: 'CREATE_GROUP_FAILURE', payload: err.message });
    throw err;
  }
};

组件中处理

import { useState, useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { createNewGroup } from './actions';
import { reduxForm, Field } from 'redux-form';

const NewGroupForm = ({ handleSubmit }) => {
  const dispatch = useDispatch();
  const groups = useSelector(state => state.groups.groups);
  const [newGroupId, setNewGroupId] = useState(null);

  const onSubmit = async (values) => {
    try {
      const id = await dispatch(createNewGroup(values));
      setNewGroupId(id);
    } catch (err) {
      alert('创建失败：' + err);
    }
  };

  useEffect(() => {
    if (newGroupId) {
      const createdGroup = groups.find(group => group.id === newGroupId);
      if (createdGroup) {
        console.log('找到刚创建的组:', createdGroup);
      }
    }
  }, [newGroupId, groups]);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Field name="name" component="input" type="text" placeholder="组名" />
      <button type="submit">创建组</button>
    </form>
  );
};

export default reduxForm({ form: 'newGroup' })(NewGroupForm);

如果你用Redux Saga处理异步流程，可以在saga里完成请求后，通过回调函数把新组的数据直接传给组件，不用依赖Redux状态的更新。

示例代码（Saga部分） #

import { call, put, takeLatest } from 'redux-saga/effects';

function* createGroupSaga(action) {
  try {
    const response = yield call(fetch, '/api/groups', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(action.payload)
    });
    const newGroup = yield response.json();
    yield put({ type: 'CREATE_GROUP_SUCCESS', payload: newGroup });
    // 通过action里的回调把结果传给组件
    if (action.onSuccess) {
      yield action.onSuccess(newGroup);
    }
  } catch (err) {
    yield put({ type: 'CREATE_GROUP_FAILURE', payload: err.message });
    if (action.onError) {
      yield action.onError(err);
    }
  }
}

export function* watchCreateGroup() {
  yield takeLatest('CREATE_GROUP_REQUEST', createGroupSaga);
}

组件中调用

import { useDispatch } from 'react-redux';
import { reduxForm, Field } from 'redux-form';

const NewGroupForm = ({ handleSubmit }) => {
  const dispatch = useDispatch();

  const onSubmit = (values) => {
    dispatch({
      type: 'CREATE_GROUP_REQUEST',
      payload: values,
      onSuccess: (newGroup) => {
        console.log('刚创建的组ID:', newGroup.id);
        // 直接在这里处理后续逻辑，比如跳转
      },
      onError: (err) => {
        alert('创建失败：' + err.message);
      }
    });
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Field name="name" component="input" type="text" placeholder="组名" />
      <button type="submit">创建组</button>
    </form>
  );
};

export default reduxForm({ form: 'newGroup' })(NewGroupForm);

总的来说，方案1是最推荐的，符合REST规范，逻辑清晰，组件不用额外处理ID匹配的问题。如果后端没法返回完整实体，再考虑方案2或3。

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