redux thunk如何调用curried异步thunk函数？

Question

如果在StackOverflow上有类似的问题，我很抱歉，但经过3个小时的搜索，我找不到一个。

我正在尝试学习Redux，并通过ReactJS的初学者熟练程度，并具有以下thunk功能：

export const listProducts = () => 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_FAIL,
        payload: misc_data_here
    })
}}

此函数在dispatch函数中的另一个文件中调用，相关代码如下所示：

function HomeScreen() {

const dispatch = useDispatch()
const productList = useSelector(state => state.productList)
const { error, loading, products } = productList

useEffect(() => {
    dispatch(listProducts())
    
}, [dispatch])

return (rest of UI...]

我的问题如下：

在这种情况下，listProducts是如何通过redux调用的？如果我(糟糕的)理解是正确的，就需要像listProducts()(dispatch function here)一样调用它。thunk (async (dispatch))是如何向调度函数提供的，以及listProducts函数实际返回到HomeScreen()中的dispatch调用中的内容

Answer 1

在分派操作时，Redux不会调用您的listProducts操作创建者。thunk redux中间件检查操作值是对象(例如，正常操作对象)还是函数。如果它是一个函数，那么中间件将调用curried函数并传递dispatch和getState函数，这样就可以处理异步逻辑并分派任何进一步的操作。

中间件是如何工作的？

thunk中间件的实际实现非常短--只有大约10行。这是消息来源，并添加了更多的注释： Redux thunk中间件实现，注释 //标准中间件定义，具有3个嵌套函数: // 1)接受{dispatch, getState} // 2)接受next // 3)接受action const thunkMiddleware = ({调度，getState }) => next => action => { //如果“动作”实际上是一个函数.如果(typeof action === ' function ') { //然后调用该函数并将dispatch和getState作为参数传递给参数，则返回操作(调度，getState) } //否则这是一个正常操作--发送它继续返回next( action ) }} 换言之：

• 如果将一个函数传递到分派中，thunk中间件将看到它是一个函数而不是动作对象，拦截它，并以(分派，getState)作为它的参数调用该函数。
• 如果它是一个正常的动作对象(或其他任何东西)，它将被转发到链中的下一个中间件。

还请参见Redux异步数据流。获得一个很好的动画视觉解释。