dva中使用effects调用reducers修改state数据

最新推荐文章于 2023-02-02 15:25:40 发布

IT行星

最新推荐文章于 2023-02-02 15:25:40 发布

阅读量1.1k

点赞数 1

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/m0_72694993/article/details/126638366

版权

本文详细讲解了如何在Redux中，通过effects中的fetchAllUsers action调用setUsers reducer来更新state，以实现从后端获取数据并同步到前端的状态管理。通过yield和put的配合，确保了异步操作与状态管理的同步执行。

摘要由CSDN通过智能技术生成

我们修改state中的数据的时候需要通过reducers的的方法进行修改，所以当我们effects函数想去修改state中的数值的时候，需要利用put方法调用reducers函数来进行修改。put函数的使用方法和dispatch类似，put({type:'调用的reducers函数名字'，额外参数})，我们一起接者做一个小小的例子，我们把将昨天文章获取后端的数据传递给state

import { getAllUsers } from "../api";
export default {
    state: [],
    reducers: {
        setUsers(state, { users }) {
            return users;
        },
    },
    effects: {
        *fetchAllUsers(action, { call, put }) {
            var res = yield call(getAllUsers);}
        },
    
};

我们昨天做到这一步，定义了state以及reducers方法和获取到后端的数据并存储到res中，当正常获取的时候，res.status的数值为200，正常获取数据时res.data.code的数值为200，所以我们可以当他们的数值都为200的时候把数值赋值给state，通过put方法进行调用reducers进行修改，值得注意的是，昨天强调当我们的使用call/put等方法的时候要记得用yield进行修饰

import { getAllUsers } from "../api";
export default {
    state: [],
    reducers: {
        setUsers(state, { users }) {
            return users;
        },
    },
    effects: {
        *fetchAllUsers(action, { call, put }) {
            var res = yield call(getAllUsers);
            console.log(res);
            if(res.status===200){
                if(res.data.code==200){
                    yield put({type:'setUsers',users:res.data.data});
                }
            }
        },
    },
};