将事件处理器存入Redux Store是否合理？如何传递Auth函数？

Great question! Let's break this down clearly and practically:

首先：把Auth函数存入Redux Store是不合理的 #

Redux的核心设计原则之一是应用状态必须是可序列化的纯数据（比如对象、数组、字符串、数字这类）。函数属于不可序列化的类型，将其存入Store会带来一系列问题：

• Redux DevTools等调试工具无法正常追踪状态变化，因为函数没法被序列化展示，你看不到状态的实际内容；
• 如果需要持久化Store状态（比如存到localStorage），函数会被直接忽略或抛出错误，没法被正确保存和恢复；
• 违背了Redux「状态可预测」的理念——Store应该只存放描述应用状态的数据，而不是业务逻辑函数。

替代方案：向LoginForm传递Auth函数的几种合理方式 #

1. 直接通过Props传递（最适合层级较浅的组件树） #

这是最简单直观的方式：让上层的App组件拿到Auth函数，然后作为props直接传给LoginForm。

示例代码：

// App组件
function App() {
  // 假设Auth函数已在当前作用域可用
  return (
    <div className="app-container">
      <LoginForm onAuthenticate={Auth} />
    </div>
  );
}

// LoginForm组件
function LoginForm({ onAuthenticate }) {
  const handleSubmit = (e) => {
    e.preventDefault();
    const login = e.target.login.value;
    const password = e.target.password.value;
    // 调用传入的Auth函数
    onAuthenticate(login, password);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input name="login" placeholder="Login" />
      <input name="password" type="password" placeholder="Password" />
      <button type="submit">Login</button>
    </form>
  );
}

2. 使用React Context（适合深层级组件树，避免Props Drilling） #

如果你的组件层级很深，一层层传递props太繁琐，可以用React Context来全局提供Auth函数，让LoginForm直接从Context中获取。

示例代码：

// 先创建一个Auth Context
import { createContext, useContext } from 'react';

const AuthContext = createContext();

// 在顶层Provider中注入Auth函数
function AppProvider({ children }) {
  return (
    <AuthContext.Provider value={Auth}>
      {children}
    </AuthContext.Provider>
  );
}

// LoginForm中使用Context
function LoginForm() {
  const authenticate = useContext(AuthContext);

  const handleSubmit = (e) => {
    e.preventDefault();
    const login = e.target.login.value;
    const password = e.target.password.value;
    authenticate(login, password);
  };

  return (
    <form onSubmit={handleSubmit}>
      {/* 表单元素... */}
    </form>
  );
}

// 根组件结构调整
<AppProvider>
  <App>
    <LoginForm />
  </App>
</AppProvider>

3. 封装为Redux Thunk/异步Action（最符合Redux架构的方案） #

因为你的Auth函数最终会修改Store并填充SessionId，更标准的Redux做法是把这个异步逻辑封装成Thunk Action Creator（需要配合redux-thunk中间件），让LoginForm通过useDispatch触发这个action，而不是直接传递Auth函数。

示例代码：

// 定义Thunk Action
const authenticateUser = (login, password) => async (dispatch) => {
  try {
    // 调用原始Auth函数获取SessionId
    const sessionId = await Auth(login, password);
    // 触发action更新Store
    dispatch({
      type: 'AUTH_SUCCESS',
      payload: { sessionId }
    });
  } catch (error) {
    dispatch({
      type: 'AUTH_FAILURE',
      payload: { error: error.message }
    });
  }
};

// LoginForm组件中使用
import { useDispatch } from 'react-redux';

function LoginForm() {
  const dispatch = useDispatch();

  const handleSubmit = (e) => {
    e.preventDefault();
    const login = e.target.login.value;
    const password = e.target.password.value;
    // 触发Thunk Action
    dispatch(authenticateUser(login, password));
  };

  return (
    <form onSubmit={handleSubmit}>
      {/* 表单元素... */}
    </form>
  );
}

这种方式把认证逻辑和状态更新绑定在一起，完全符合Redux的数据流规范，还能方便统一处理加载状态、错误状态等场景。

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