如何将Rails后端用户ID持久化到React前端以实现数据过滤？

嘿，我来帮你搞定这个用户ID持久化的事儿！既然你已经有了能正常运行的user reducer和登录相关的actions，咱们只需要在现有基础上补几个关键步骤，就能轻松实现需求，下面一步步来：

1. 登录成功时将用户ID存入本地存储 #

打开你的./actions/userActions，找到处理登录请求的异步action（比如loginUser）。当Rails API返回成功的用户数据后，把用户ID存入localStorage（或者sessionStorage，前者会持久到浏览器关闭后，后者仅在当前会话有效，根据你的需求选）：

export const loginUser = (credentials) => async (dispatch) => {
  try {
    const response = await axios.post('/api/login', credentials);
    const user = response.data.user;
    
    // 把用户ID存入localStorage
    localStorage.setItem('currentUserId', user.id);
    
    dispatch({ type: 'LOGIN_SUCCESS', payload: user });
  } catch (error) {
    dispatch({ type: 'LOGIN_FAILURE', payload: error.response.data });
  }
};

2. 在Reducer初始化时读取本地存储的用户ID #

修改你的user reducer，让它初始化时从localStorage读取已保存的用户ID，这样页面刷新后Redux store里还能保留这个ID：

const initialState = {
  currentUser: null,
  // 读取本地存储的ID，注意转成数字（因为localStorage存的是字符串）
  userId: localStorage.getItem('currentUserId') ? Number(localStorage.getItem('currentUserId')) : null,
  error: null
};

const userReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'LOGIN_SUCCESS':
      return {
        ...state,
        currentUser: action.payload,
        userId: action.payload.id, // 更新state里的userId
        error: null
      };
    case 'LOGOUT_SUCCESS':
      return {
        ...state,
        currentUser: null,
        userId: null // 登出时清空userId
      };
    // 其他case保持不变
    default:
      return state;
  }
};

export default userReducer;

3. 参考assetsReducer逻辑，用用户ID过滤请求数据 #

现在你可以在需要获取特定用户数据的actions里（比如和assets相关的请求），从Redux store中取出userId，并作为参数传给Rails API。比如模仿./reducers/assetsReducer的逻辑，在对应的action里这样写：

export const fetchUserAssets = () => async (dispatch, getState) => {
  try {
    // 从store中获取当前用户ID
    const { userId } = getState().user;
    
    // 带上user_id参数请求Rails API
    const response = await axios.get(`/api/assets?user_id=${userId}`);
    
    dispatch({ type: 'FETCH_ASSETS_SUCCESS', payload: response.data });
  } catch (error) {
    dispatch({ type: 'FETCH_ASSETS_FAILURE', payload: error.response.data });
  }
};

对应的Rails后端assets_controller.rb里要处理这个参数：

def index
  @assets = Asset.where(user_id: params[:user_id])
  render json: @assets
end

4. 处理登出时的清理逻辑 #

别忘了在登出action里清除本地存储的用户ID，避免登出后刷新页面还残留旧数据：

export const logoutUser = () => (dispatch) => {
  // 清除localStorage里的用户ID
  localStorage.removeItem('currentUserId');
  
  dispatch({ type: 'LOGOUT_SUCCESS' });
};

额外注意事项 #

• 如果你的项目用了Redux Persist，也可以直接配置持久化user reducer的相关字段，这样不用手动操作localStorage，但手动方式更轻量，适合你的场景
• 始终注意localStorage存储的是字符串类型，所以需要用Number()转成数字类型再使用，避免后续请求时传字符串ID导致后端查询问题

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