不能在 react redux 中使用多个调度

Question

我有一个问题，所以我试图放置两个或多个"派遣；在我的应用程序中但我不知道为什么我在最后一次中只发送了一次

import axios from "axios";
const setDataBlog = (page) =>{
return (dispatch) => {
axios.get(`http://localhost:4000/api/blogs/?page=${page}&perPage=3`)
.then(result => {
const responseAPI = result.data
dispatch({type: 'UPDATE_PAGE', payload: 
{currentPage: responseAPI.current_page, 
totalPage: responseAPI.total_page}}) // this is not working
dispatch({type: 'SET_BLOGS', payload: responseAPI.data}) //just work in here

})
.catch(error => {
console.log('error',error);
})
}}
export default setDataBlog

但是如果我改变调度的位置

import axios from "axios";
const setDataBlog = (page) =>{
return (dispatch) => {
axios.get(`http://localhost:4000/api/blogs/?page=${page}&perPage=3`)
.then(result => {
const responseAPI = result.data
dispatch({type: 'SET_BLOGS', payload: responseAPI.data}) //not working
dispatch({type: 'UPDATE_PAGE', payload: 
{currentPage: responseAPI.current_page, 
totalPage: responseAPI.total_page}}) // working
})
.catch(error => {
console.log('error',error);
})
}}
export default setDataBlog

我试着在这里使用

import { useEffect} from "react";
import CardBlog from "../components/CardBlog";
import Pagination from "../components/Pagination";
import {useDispatch, useSelector} from 'react-redux'
import {setDataBlog} from '../redux/action'
const Home = () => {
const {dataBlog, page} = useSelector(state => state.homeReducer);
const dispatch = useDispatch();
//check working or not
console.log('page', page);
useEffect(() => {
dispatch(setDataBlog(1))
}, [dispatch])
return ( 
<div className="max-w-screen-xl mx-auto px-4 py-16 sm:px-6 lg:px-8">
<div className=" md:grid md:grid-cols-2 lg:grid-cols-3">
{dataBlog?.map(blog => (
<CardBlog key={blog._id} image={`http://localhost:4000/${blog.image}`} 
title={blog.title} 
body={blog.body}
author={blog.author}
date={blog.createdAt}/>
))}
</div>
<div>
<Pagination/>
</div>
</div>
);

}

导出默认主页；

谢谢，很抱歉我英语不好，但我希望你能理解我说的

Answer 1

我无法告诉您代码失败的原因，但我想提供一些建议避免触发多个同步操作

把一个动作想象成代表已经发生的一件事：通常是用户事件，如按钮点击或按键，或者在这种情况下是网络响应。

我建议将以上两个操作合并为一个操作，例如

dispatch({
type: 'BLOG_API_RESPONSE',
payload: {
currentPage: responseAPI.current_page,
totalPages: responseAPI.total_page,
data: responseAPI.data,
},
});

您可以在减速器的多个位置挂接BLOG_API_RESPONSE对状态更新的操作不必是一对一的一个操作可以产生多个状态更新。

当您将自己限制为启动单个同步操作时，您会发现您的代码更容易合理化和调试。

Answer 2

试试这个：

const setDataBlog = (page) => async dispatch => {
try {

const { responseAPI } = await axios.get(`http://localhost:4000/api/blogs/?page=${page}&perPage=3`)
dispatch({type: 'SET_BLOGS', payload: responseAPI.data}) 
dispatch({type: 'UPDATE_PAGE', payload: {currentPage:responseAPI.current_page, totalPage: responseAPI.total_page}})})
catch(error => {
console.log('error',error);
})

}