为什么 Redux 操作没有在 Redux-Tooklit 中被调度 res.data.result？缺少中间件？看起来还不错...

如何解决为什么 Redux 操作没有在 Redux-Tooklit 中被调度 res.data.result？缺少中间件？看起来还不错...

我正在将 react-redux 与 redux 和 redux-toolkit 结合使用。根据这个 example，我创建了一个异步调度，在解决时调用 reducer 操作。

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

export const BlogSlice = createSlice({
  name: "Blog",initialState: {
    BlogList: null,},reducers: {
    getBlogList: (state,action) => {
      console.log(action.payload);
      state.BlogList = action.payload;
    }
  },});

export const { getBlogList } = BlogSlice.actions;

export const getBlogListAsync = (user_id) => (dispatch) => {
  axios.get(`/api/blog/getblogs/${user_id}`).then((res) => {
    console.log(res.data);
    dispatch(getBlogList(res.data.result));
  });
};

export const selectBlogList = (state) => state.Blog.BlogList;
export default BlogSlice.reducer;

我已在组件中相应地使用它，以便组件分派 getBlogListAsync 并记录 res.data 但未分派 getBlogList。我尝试放置其他 console.log()，但不明白有什么问题。

一个类似的 Slice 与另一个组件完美配合。

解决方法

很难确定这里出了什么问题，因为没有什么绝对是错误的。

res.data.result？

您正在登录 res.data，然后将博客列表设置为 res.data.result。我对您的错误的最佳猜测是 res.data.result 不是访问博客的正确属性，但如果没有看到您的 API，我不可能知道这一点。

console.log(res.data);
dispatch(getBlogList(res.data.result));

缺少中间件？

有没有可能没有安装“thunk”中间件？如果您使用 Redux Toolkit 并完全省略中间件，则默认情况下将安装 thunk 中间件。此外，如果是这种情况，您应该得到明显的错误，而不是什么也没有发生。

看起来还不错...

我使用占位符 API 测试了您的代码，并且能够正常运行。也许此代码可以帮助您识别最终问题。 Code Sandbox Demo。

import React from "react";
import { createSlice,configureStore } from "@reduxjs/toolkit";
import axios from "axios";
import { Provider,useDispatch,useSelector } from "react-redux";

export const BlogSlice = createSlice({
  name: "Blog",initialState: {
    BlogList: null
  },reducers: {
    getBlogList: (state,action) => {
      console.log(action.payload);
      state.BlogList = action.payload;
    }
  }
});

export const { getBlogList } = BlogSlice.actions;

const store = configureStore({
  reducer: {
    Blog: BlogSlice.reducer
  }
});

export const getBlogListAsync = (user_id) => (
  dispatch: Dispatch
) => {
  // your url `/api/blog/getblogs/${user_id}`
  const url = `https://jsonplaceholder.typicode.com/posts?userId=${user_id}`; // placeholder URL
  axios.get(url).then((res) => {
    console.log(res.data);
    // your list: res.data.result <-- double check this
    const list = res.data; // placeholder list
    dispatch(getBlogList(list));
  });
};

export const selectBlogList = (state) => state.Blog.BlogList;

const Test = () => {
  const dispatch = useDispatch();
  const blogs = useSelector(selectBlogList);

  const user_id = "1";

  return (
    <div>
      <button onClick={() => dispatch(getBlogListAsync(user_id))}>
        Load Blogs
      </button>
      <h3>Blog Data</h3>
      <div>{JSON.stringify(blogs)}</div>
    </div>
  );
};

export default function App() {
  return (
    <Provider store={store}>
      <Test />
    </Provider>
  );
}