React Redux中dispatch(fetchPosts())触发后state为空的问题求助

核心错误定位 #

你的postsSlice.js代码存在语法结构错误：extraReducers被错误嵌套在了reducers对象内部。这会导致Redux无法识别并处理createAsyncThunk生成的异步action类型，进而不会更新state数据。

createSlice的extraReducers是顶层配置项，必须与reducers、name、initialState同级，不能放在reducers的子属性中。

修正后的postsSlice.js关键代码 #

将extraReducers从reducers内移出，调整为顶层属性：

const postsSlice = createSlice({
  name: 'posts',
  initialState,
  reducers: {
    // 此处放置同步reducer（如果有）
  },
  // extraReducers为顶层配置，与reducers同级
  extraReducers(builder) {
    builder
      .addCase(fetchPosts.pending, (state) => {
        state.status = 'loading'
      })
      .addCase(fetchPosts.fulfilled, (state, action) => {
        state.status = 'succeeded'
        state.posts = state.posts.concat(action.payload)
      })
      .addCase(fetchPosts.rejected, (state, action) => {
        state.status = 'failed'
        state.error = action.error.message
      })
      .addCase(addNewPost.fulfilled, (state, action) => {
        state.posts.push(action.payload)
      })
  }
})

额外验证点 #

1. 确认Mock接口返回的数组中每个对象都包含id字段，你的组件和选择器都依赖该字段作为唯一标识。
2. 查看浏览器控制台是否存在action类型不匹配的报错信息。
3. 可在fetchPosts.fulfilled回调中打印action.payload，验证数据是否正确传递到reducer中。

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