登录捕获信息存储场景咨询：是否适合使用Redux？

这属于Redux的适用场景吗？ #

是的，但并非唯一选择。Redux擅长管理全局共享状态，如果你的应用已经在使用Redux处理其他状态（比如用户偏好、全局配置），直接把UID和标识符加入Redux store完全合理——毕竟这些信息需要在多个组件/页面调用数据库时复用，属于典型的全局状态需求。

但如果你的应用很小，没有引入Redux的其他需求，为了两个字符串特意加Redux就有点过度设计了，这时可以选更轻量的方案。

技术建议 #

• 用Redux实现（适合已有Redux的项目）

  1. 创建一个authSlice，定义初始状态为{ uid: '', identifier: '' }
  2. 登录成功后，dispatch一个setAuthInfo action，把获取到的UID和标识符存入store
  3. 调用数据库时，通过useSelector从store中读取这两个值即可
     示例代码：

  // authSlice.js
  import { createSlice } from '@reduxjs/toolkit';
  
  const initialState = {
    uid: '',
    identifier: ''
  };
  
  const authSlice = createSlice({
    name: 'auth',
    initialState,
    reducers: {
      setAuthInfo: (state, action) => {
        state.uid = action.payload.uid;
        state.identifier = action.payload.identifier;
      },
      clearAuthInfo: (state) => {
        state.uid = '';
        state.identifier = '';
      }
    }
  });
  
  export const { setAuthInfo, clearAuthInfo } = authSlice.actions;
  export default authSlice.reducer;
  

• 轻量替代方案（适合小型无Redux项目）

  • localStorage/sessionStorage：直接把信息存在浏览器存储里，调用时读取。sessionStorage会在浏览器关闭后清空，localStorage会持久保存，根据你的需求选。示例：

    // 登录时存储
    localStorage.setItem('authInfo', JSON.stringify({ uid: 'xxx', identifier: 'yyy' }));
    // 调用数据库时读取
    const authInfo = JSON.parse(localStorage.getItem('authInfo'));
    

  • React Context：如果需要在多个组件间传递这些信息，但不想用Redux，可以创建一个Auth Context，把信息存在Context的state里，子组件通过useContext获取。

注意事项 #

如果这两个标识符包含敏感信息（比如令牌类数据），不要存在localStorage（容易被XSS攻击），优先考虑HttpOnly Cookie；如果只是普通的用户ID类字符串，上面的方案都安全。

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