界面如下:
页面通常是两部分,一部分是筛选条件,一部分是数据列表,通常情况下,筛选数据发生变化,数据列表也会发生变化,此时我一般用reducer将第一部分的数据抽离出来,以上面页面为例,通常我会抽象出6个变量:
const initialState = {
selectData: null,
places: [],
currentplace: {},
Ggsises: [],
currentGgsis: {},
}
然后我会定义两个初始化函数,确切的说是一个,首先筛选条件要初始化,所以或提前获取数据,这是第一个函数,这个函数只执行一次,第二个是初始化列表,但是初始化列表是根据筛选条件变化的,虽然初始化执行了一次,但是后面还会执行很多次,所以这里用到了一个技巧。
什么技巧呢,我用了两个useEffect函数:
useEffect(() => {
initData()
}, []);
useEffect(() => {
if (state.Ggsises.length == 0 || state.places.length == 0) return;
getListData(state)
}, [state])
第一个useEffect作为筛选条件初始化只执行一次,后一个根据reducer的变化来执行,页面初次加载也会执行,初始化列表。
这里面需要注意的是state变化是需要执行disptach的。
还有一个注意点是,如果用户从其它页面跳转而来,并且路由state携带参数,我们在初始化时应该判断props.location.state,
并且根据结果触发dispatch:
reducer很简单:
const initialState = {
selectData: null,
places: [],
currentplace: {},
Ggsises: [],
currentGgsis: {},
}
const reducer = (state, action) => {
const { type, payload } = action;
switch (type) {
case "DATA_CHANGE":
return { ...state, ...payload };
default: {
return state;
}
}
}
示例的界面是全量请求,也就是请求参数不切定就请求全部,也有一些页面是默认个设定一个值,这样的话在reducer内部就需要做一些初始化了,比如确定currentXXX,这样页面就能指定加载哪些数据了。
此时只需要在监听每个筛选条件,触发dispatch就可以了。
思考一下如果不用reducer我们会怎么做呢,首先在useffect函数中初始化筛选条件,然后根据初始条件,路由参数,初始化列表。
然后分别监听筛选条件,每个条件发生变化,都需要根据变化的条件重新获取数据,理论上不难,但是如果条件太多就会定义大量的useState,代码量比较繁琐,此时用reducer就比较合适了,所有筛选条件集中在reducer中,筛选条件的组件中的状态也绑定reducer,
简直不要太清晰,reducer等于维护了一个状态树。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。