Redux Action Creator 和 Dispatch 与语法混淆

Question

我在理解这个 productListCreator 语法时遇到一些问题。使用 thunk，我正在学习的教程说 thunk 允许我们在函数内编写异步函数。

productListCreator 是一个 returns 以分派作为参数的异步函数。

但是当你将 call/use 与 dispatch(productListCreator()) 一起使用时，我很困惑。

productListCreator 没有传递调度参数。相反，它被传递到 useDispatch 挂钩中。

所以对我来说，代码是说 useDispatch() 接受 productListCreator 函数并运行它，它没有为“调度”传递任何参数。

import axios from 'axios'

const productListCreator = () => async(dispatch) => {  
    try {
        dispatch({
            type: 'PRODUCT_LIST_REQUEST'
        })

        const { data } = await axios.get('/api/products')
        
        dispatch({
            type: 'PRODUCT_LIST_SUCCESS',
            payload: data
        }) 
    } catch (error) {
        dispatch({
            type: 'PRODUCT_LIST_ERROR',
            payload: error.message
        })
    }
}


export default productListCreator

const dispatch = useDispatch()
    
    // Retrieve all products at reload
    useEffect(()=>{
        dispatch(productListCreator())
    },[])

Answer 1

productListCreator 是一位“thunk 动作创作者”。它定义了“thunk 函数”，returns 它。那个“thunk 函数”是传递给 dispatch 的。然后 thunk 中间件拦截 thunk 函数，调用它，并将 (dispatch, getState) 作为参数传入。

我建议通读新的 "Writing Logic with Thunks" docs page，其中解释了 thunk 的工作原理。

Redux Action Creator 和 Dispatch 与语法混淆

Redux Action Creator and Dispatch confusion with syntax

reactjs

redux

redux-thunk

react-redux