如何在React和Redux中使用asyncValidate返回的数据并存入Redux Store？

嘿，这个场景我太熟悉了！刚好之前做项目时处理过类似需求，给你一步步拆解具体操作：

1. 先准备好Redux的基础结构 #

首先得确保你的项目已经配置好了Redux Store、reducer这些基础部分。如果还没弄，先创建一个专门处理表单数据的slice（用Redux Toolkit的话更方便，当然传统Redux也可以）。

2. 创建对应的Action和Reducer（或Slice） #

用Redux Toolkit的方式（推荐，更简洁） #

我一般会用Redux Toolkit来写，能少写很多样板代码：

// features/formData/formDataSlice.js
import { createSlice } from '@reduxjs/toolkit';

const initialState = {
  serverData: null,
  isLoading: false,
  error: null
};

const formDataSlice = createSlice({
  name: 'formData',
  initialState,
  reducers: {
    setServerData: (state, action) => {
      state.serverData = action.payload;
    },
    clearServerData: (state) => {
      state.serverData = null;
    }
  }
});

export const { setServerData, clearServerData } = formDataSlice.actions;
export default formDataSlice.reducer;

别忘了把这个reducer加到你的Root Reducer里，再配置好Store。

传统Redux方式（如果不用Toolkit） #

要是你还在用传统的Redux写法，那先定义action类型和action creator：

// actions/formActions.js
export const SET_SERVER_DATA = 'SET_SERVER_DATA';
export const CLEAR_SERVER_DATA = 'CLEAR_SERVER_DATA';

export const setServerData = (data) => ({
  type: SET_SERVER_DATA,
  payload: data
});

export const clearServerData = () => ({
  type: CLEAR_SERVER_DATA
});

// reducers/formReducer.js
const initialState = {
  serverData: null
};

export default function formReducer(state = initialState, action) {
  switch (action.type) {
    case SET_SERVER_DATA:
      return { ...state, serverData: action.payload };
    case CLEAR_SERVER_DATA:
      return { ...state, serverData: null };
    default:
      return state;
  }
}

3. 在表单验证成功后派发Action #

当你的表单验证函数返回服务端数据时，直接在这个函数里调用dispatch把数据存到Store里。比如你的表单提交函数：

import { useDispatch } from 'react-redux';
import { setServerData } from '../features/formData/formDataSlice';

const MyForm = () => {
  const dispatch = useDispatch();

  const handleSubmit = async (formValues) => {
    try {
      // 调用你的服务端验证函数
      const serverResponse = await validateFormOnServer(formValues);
      // 验证成功，拿到返回的数据后，派发给Redux
      dispatch(setServerData(serverResponse));
      // 这里还可以做其他操作，比如跳转到成功页面
    } catch (error) {
      // 处理验证失败的情况
      console.error('表单验证失败:', error);
    }
  };

  // 表单渲染逻辑...
};

4. 在组件中获取Store里的数据 #

存进去之后，你可以在任何需要的组件里用useSelector来获取这些数据：

import { useSelector } from 'react-redux';

const SuccessPage = () => {
  const serverData = useSelector(state => state.formData.serverData);

  if (!serverData) {
    return <div>请先完成表单验证</div>;
  }

  return (
    <div>
      <h2>验证成功！</h2>
      <p>服务端返回的用户ID: {serverData.userId}</p>
      <p>服务端返回的令牌: {serverData.token}</p>
    </div>
  );
};

额外提示 #

• 如果服务端返回的数据里有需要长期保存的（比如token），可以同时存在localStorage里，防止页面刷新后丢失，然后在Store初始化的时候从localStorage读取。
• 要是你的验证函数是在Redux Thunk或者Saga里调用的，那直接在异步逻辑里完成派发就行，不用在组件里处理异步，代码会更整洁。

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