如何使动作可重用？ ReactJS 与 Redux答案

【问题标题】：How can I make an action be reusable? ReactJS with Redux如何使动作可重用？ ReactJS 与 Redux
【发布时间】：2020-03-07 23:14:21
【问题描述】：

我需要做一个动态动作。换句话说，它可以重复用于不同的操作。

我试图创建一个加载类型和有效负载的函数，但出现错误。

我正在尝试使此功能起作用：

        export function getData(url, type) {
            const request = Server.get(url)

            return (dispatch) =>
            request.then((response) => {  
                    dispatch({
                        type: type,
                        payload: response.data
                    })
                }).catch(function (error) {
                    console.log(error)
                });
        }

但是当我以这种方式调用此函数时出现错误：

        export function getClientes() {
            Actions.getData('ClientesEFornecedores', GET_CLIENTES)    
        }

它正在显示：

        Uncaught Error: Actions must be plain objects. Use custom middleware for async actions.

我这样调用 getClientes() 函数：

        function ClientesTable(props)
        {
            const dispatch = useDispatch();
            const clientes = useSelector(({erpCliente}) => erpCliente.clientes.data);

            useEffect(() => {
                dispatch(Actions.getClientes());
            }, [dispatch]);

我怎样才能使动作可重用？

【问题讨论】：

标签： javascript reactjs ecmascript-6 react-redux

【解决方案1】：

试试这样的

export const getData=(url, type) =>async dispatch=>{

        try{
           const response = await Server.get(url);

           dispatch({ type: type,payload: response.data })

        } catch(err){
            console.log(err)
        }
    }

getClientes函数

export const getClientes=() => dbActions.getData('ClientesEFornecedores', GET_CLIENTES);

【讨论】：

干得好！我只是不知道为什么要使用“异步调度”
如果我需要使用async/await 而不是then and catch，我需要添加async。 async/await 方法提供了更具可读性的代码。请关注此stackoverflow.com/a/46118968/5124488

【解决方案2】：

事实上，我几乎成功了。剩下的就是返回函数调用。

这是有效的方式：

        export function getClientes() {
            return dbActions.getData('ClientesEFornecedores', GET_CLIENTES)    
        }

【讨论】：