由于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;
