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;