getState 和 dispatch 如何在 redux-thunk action creator 中导入？

Posted 2023-02-22

【中文标题】getState 和 dispatch 如何在 redux-thunk action creator 中导入？

【英文标题】：How are getState and dispatch imported in redux-thunk action creator?

【发布时间】：2020-02-03 21:54:06

【问题描述】：

import _ from 'lodash';
import jsonPlaceholder from '../apis/jsonPlaceholder';

export const fetchPostsAndUsers = () => async (dispatch, getState) => 
  await dispatch(fetchPosts());

  _.chain(getState().posts)
    .map('userId')
    .uniq()
    .forEach(id => dispatch(fetchUser(id)))
    .value();
;

export const fetchPosts = () => async dispatch => 
  const response = await jsonPlaceholder.get('/posts');

  dispatch( type: 'FETCH_POSTS', payload: response.data );
;

在上面的代码中，getState 和 dispatch 函数作为参数传递给 action creator 函数，我很困惑的是为什么这些函数没有从任何地方导入，或者 react/redux 以某种方式为我们导入了它们？

【问题讨论】：

这些是函数的参数。该函数将通过传递它们来调用。在这种情况下不需要导入任何东西

好吧，我觉得我现在问了一个愚蠢的问题，这可能是另一个问题，如果这些函数作为参数传递它们来自哪里，它们仍然需要存在于当前模块中才能成为正确地作为参数传递，还是 react 从其他地方传递它们？

为什么它们需要存在于当前模块中才能作为参数传递？这通常会大大降低函数的效用。您导出这些函数，以便它们可以在其他地方使用（大概连接到某个地方的 redux 存储）。

【参考方案1】：

好的，我会尽力消除您的困惑， 如您所知，动作创建者返回纯 javascript 对象，但 thunk 是一个中间件，它允许您从动作创建者返回函数而不是纯 javascript 对象，所以当您使用 thunk 时，如果您返回 plain javascript 对象动作创建者以正常方式处理，但是当您从动作创建者返回 function 时，比 thunk 处理它并使用 dispatch 和 getState 调用此函数，所以你可以异步调度一个动作，你没有传递这些参数，这样看你是从动作创建者返回一个回调，然后用这些参数重调用这个回调。

希望对您有所帮助。

【参考方案2】：

当你使用 redux 提供的连接函数将 react 组件与 redux 连接时，你将传递给函数：mapStateToProps 和 mapDispatchToProps。这些将是您寻找的参数（调度和 getState）。

【参考方案3】：

Thunk 是一个函数，它可以选择接受一些参数并返回另一个函数，它接受 dispatch 和 getState 函数，这两个函数都由 Redux Thunk 中间件提供