Redux中无法更新指定ID帖子的Reducer状态问题求助

你的核心问题是Reducer的状态结构不一致，导致更新操作没有命中正确的状态位置。让我一步步帮你排查和修复：

问题根源 #

你的Reducer初始状态是{ posts: {} }——所有帖子数据都存储在state.posts这个嵌套对象里，但在SUBMIT_POST的处理逻辑中，你直接在根State层面尝试更新[id]，而不是针对state.posts下的对应帖子进行修改。这就导致你的更新操作完全没作用在正确的状态节点上。

修正后的Reducer代码 #

我帮你统一了所有case的状态更新逻辑，确保所有帖子操作都针对state.posts：

import _ from 'lodash';
import { FETCH_POSTS, FETCH_POST, CREATE_POST, EDIT_POST, SUBMIT_POST } from '../actions/posts_action';

export default function(state = { posts: {} }, action) {
  switch (action.type) {
    case FETCH_POST:
      // 修正：将单个帖子添加到state.posts中
      return {
        ...state,
        posts: {
          ...state.posts,
          [action.payload.id]: action.payload
        }
      };
    case FETCH_POSTS:
      // 这部分逻辑正确，保持不变
      return { 
        posts: { ...state.posts, ...(_.mapKeys(action.payload,'id')) }
      };
    case CREATE_POST:
      // 修正：将新创建的帖子添加到state.posts中
      return {
        ...state,
        posts: {
          ...state.posts,
          [action.payload.id]: action.payload
        }
      };
    case EDIT_POST:
      // 修正：更新state.posts中的对应帖子
      return {
        ...state,
        posts: {
          ...state.posts,
          [action.payload.id]: action.payload
        }
      };
    case SUBMIT_POST:
      console.log(action.payload);
      const id = action.payload.id;
      // 核心修正：针对state.posts下的目标帖子进行更新
      return {
        ...state,
        posts: {
          ...state.posts,
          [id]: {
            // 先复制原帖子的所有属性，再覆盖新的title和body
            ...state.posts[id],
            title: action.payload.title,
            body: action.payload.body
          }
        }
      };
    default:
      return state;
  }
}

额外检查点 #

1. 确认Action Payload的正确性：
   从你的Redux DevTools中，要确认action.payload确实包含id、title、body三个字段。如果后端返回的res.data.values结构不对，可以在Action Creator里调整payload结构，比如：

   dispatch({ 
     type:SUBMIT_POST, 
     payload: {
       id: id, // 确保ID正确传递
       title: res.data.values.title,
       body: res.data.values.body
     } 
   })
   

2. 统一状态结构：
   之前的FETCH_POST、CREATE_POST等case都直接在根State上添加帖子，这会导致State结构混乱（一部分帖子在state.posts，一部分在根State），上面的修正已经统一了所有操作的状态节点，确保所有帖子都存在state.posts中。

这样修改后，你的Reducer就能正确定位到要更新的帖子，完成title和body的更新了。

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