为什么在Redux- tooklit中Redux动作没有被调度

Question

我使用redux- redux和redux-toolkit。根据这个例子，我创建了一个异步调度，在解析时调用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与另一个组件完美地工作。

Answer 1

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

res.data.result?

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

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

缺失的中间件?

有没有可能"隆隆"声?没有安装中间件?如果您使用的是Redux Toolkit，并且完全省略了中间件，那么默认情况下将安装think中间件。如果是这样的话，你应该得到明显的错误，而不是什么都没发生。

it seems fine…

我用占位符API测试了你的代码，我能够让它正常工作。也许这段代码可以帮助您识别您的问题。代码沙盒演示。

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>
);
}