使用Redux开发CRUD应用时如何获取当前登录用户并关联发布帖子

核心问题定位 #

你的用户状态设计和取值逻辑存在两点错误：

1. 用户切片（userSlice）用数组存储数据，没有单独维护当前登录用户的字段，取值时直接拿整个数组会出现异常展示
2. 渲染帖子时调用全局的用户变量，而不是每个帖子自带的发布者信息，后续扩展多用户场景会全部展示错误

分步修改方案 #

1. 调整用户切片存储结构

修改usersSlice.js，新增当前登录用户的专属存储字段：

import { createSlice } from "@reduxjs/toolkit";

const userSlice = createSlice({
  name: "user",
  initialState: {
    currentUser: null, // 存储当前登录的用户名
    userList: [] // 可选字段，需要留存所有注册用户时保留，不需要可删除
  },
  reducers: {
    saveUser (state, action) {
      // 把登录的用户名设为当前用户
      state.currentUser = action.payload;
      // 不需要留存用户列表可删除下面3行
      if(!state.userList.includes(action.payload)) {
        state.userList.push(action.payload)
      }
    },
  }
});

export const { saveUser } = userSlice.actions;
export default userSlice

2. 修正主页面用户取值逻辑

修改mainscreen.js里的用户取值代码，专门取当前登录用户：

// 把原来的 const user = useSelector((state) => state.user) 替换为
const currentUser = useSelector((state) => state.user.currentUser)

3. 发布帖子时绑定发布者信息

修改mainscreen.js里的提交帖子逻辑，把当前用户存入帖子对象：

const handleSubmitSendPost = (e) => {
  e.preventDefault();
  dispatch(
    addPost({
      id: new Date().getTime(), // 用时间戳数字当ID，比Date对象更便于判断
      title,
      content, 
      author: currentUser // 新增发布者字段
    })
  )
  setTitle('')
  setContent('')
};

4. 渲染帖子时读取自带的发布者信息

修改mainscreen.js里的帖子渲染代码，用每个帖子自身存储的发布者信息展示：

// 把原来的 <h3>@{user}</h3> 替换为
<h3>@{post.author}</h3>

可选扩展（权限控制） #

如果需要实现仅帖子作者可见编辑、删除按钮，可以给图标外层加判断：

{post.author === currentUser && (
  <>
    <MdDeleteForever
      className="icon"
      onClick={() => setOpenModal(post.id)}
    />
    <FiEdit
      onClick={() => setOpenEditModal(post.id)}
      style={{ color: "white", fontSize: "45px", paddingLeft: "23px" }}
    />
  </>
)}

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