关于条件筛选列表页开发的一些总结

界面如下：

界面

页面通常是两部分，一部分是筛选条件，一部分是数据列表，通常情况下，筛选数据发生变化，数据列表也会发生变化，此时我一般用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等于维护了一个状态树。