react 如何使用reducer？

由于react 组件化，跨组件传递数据往往不是很方便，于是就考虑数据共享
例如，商品列表，选择商品后，通过添加，删除控制在右侧显示已选择的角色点击下方的按钮区域，传递已选择商品数据
该类型可以考虑使用react hooks 的useReducer
但是useReducer 通过自定义，才能有更好的使用效果

以商品列表为例，商品列表的初始数据需要从接口获取，这个适合可以写一个函数接收该数据作为参数，然后将数据作为依赖的形式。利用依赖触发（dispatch）初始的action

使用方式如下：
组件associateProduct.js

import useSelectedProductReducer from '../hooks/useSelectedProductReducer';
const selectedProductCodesByRequest = useMemo(() => {
    return selectedProductsByRequest.reduce((pre, next) => {
        pre.push(next.productCode);
        return pre;
    }, []);
}, [selectedProductsByRequest]); // selectedProductsByRequest 通过接口获取作为依赖
const [selectedProductCodes, dispatch] = useSelectedProductReducer(selectedProductCodesByRequest);

useSelectedProductReducer.js代码如下：

import React, { useReducer, useEffect } from 'react';
const reducer = (state, { type, payload }) => {
    switch (type) {
        case 'add':
            return [...state, ...payload];
        case 'remove':
            return state.filter((productCode) => !payload.includes(productCode));
        default:
            return [...payload];
    }
};

function useSelectedProductReducer(depData) {
    const [selectedProductCodes, dispatch] = useReducer(reducer, []);
    useEffect(() => {
        if (depData) {
            dispatch({
                type: 'default',
                payload: depData
            });
        }
    }, [depData]);
    return [selectedProductCodes, dispatch];
}

export default useSelectedProductReducer;