使用CreateAsyncThunk获取数据后，Redux状态未更新且addCase未执行

使用CreateAsyncThunk获取数据，接口返回数据正常，但Redux状态完全没变化，addCase里的console.log也没执行，根本没进入这个逻辑。

相关代码 #

初始状态与异步Thunk定义 #

const initialState = {
  posts: [],
  status: "idle", //idle | loading | success | failed
  error: null,
};

export const fetchPosts = createAsyncThunk("posts/fetchPosts", async () => {
  const response = await axios.get(POSTS_URL);
  return response.data;
});

Reducer的extraReducers配置 #

extraReducers: (builder) => {
  builder.addCase(fetchPosts.fulfilled, (state, action) => {
    state.status = "success";
    console.log("test")
    state.posts = action.payload;
  });
},

排查方向与解决方案 #

• 检查Reducer注册状态：确保包含上述extraReducers的reducer，已经通过configureStore或combineReducers正确添加到Redux Store中。未注册的reducer无法响应任何action。
• 确认Thunk触发方式：必须通过dispatch(fetchPosts())触发异步action，仅调用fetchPosts()不会触发Redux状态更新流程。
• 核对Action类型一致性：查看Redux DevTools中fetchPosts.fulfilled的action类型，确认与Thunk生成的类型（如posts/fetchPosts/fulfilled）完全匹配，类型不匹配会导致reducer不响应。
• 验证Thunk的状态流转：检查DevTools中是否同时出现fetchPosts.pending和fetchPosts.fulfilled的action。若只有pending无fulfilled，可能是请求报错未捕获，建议给Thunk添加try/catch：

  export const fetchPosts = createAsyncThunk("posts/fetchPosts", async () => {
    try {
      const response = await axios.get(POSTS_URL);
      return response.data;
    } catch (err) {
      return err.response.data;
    }
  });
  

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