首页 文章

为什么需要将redux-thunks绑定到发送？

提问于
浏览 次
2

我想我在这里错过了一个基本的理解 . 我知道为了创建一个动作并因此引发redux事件链，必须使用 dispatch 调用动作创建者 .

但是，当我们有一个redux-thunk返回一个函数，它将在我们的动作创建器上调用 dispatch 时，为什么还必须使用 dispatch 调用redux-thunk？

例如，请使用以下redux-thunk：

function savePerson(person: Person) {
    return async (dispatch: any) => {
        delete person.cars;
        let newPerson = await axios.post('/api/people/addPeron', person);
        dispatch(addPersonSuccess(person));
    }
}

在没有 dispatch 的情况下调用此savePerson函数不会引发redux流，我不明白为什么考虑它返回的函数调用我们的动作创建者 dispatch . 任何人都可以澄清我似乎在这里失踪的东西吗？

javascript reactjs redux redux-thunk

1 回答

  • 2

    所有redux中间件都遵循相同的总体布局：

    const middleware => store => next => action => next(action);

    为什么必须使用调度来调用redux-thunk？

    就像你在第一段中正确指出的那样，对于要由redux中间件链评估的动作/ thunk，它必须由调用代码编写 .

    我认为误解来自于此：

    “......当我们有一个redux-thunk返回一个函数，它将调用我们的动作创建者的调度...” .

    虽然返回的函数调度动作是正确的，但它只是故事的一半 . 从技术上讲，您要派遣两次：首先是 savePerson ，后来是 addPersonSuccess . 前者是一个thunk而后者，很可能是一个简单的行动 .

    现在，让我们考虑当前的 redux-thunk source code：

    function createThunkMiddleware(extraArgument) {
  return ({ dispatch, getState }) => next => action => {
    if (typeof action === 'function') {
      return action(dispatch, getState, extraArgument);
    }

    return next(action);
  };
}

...

export default thunk;

    一旦发送 savePerson ，中间件就会将您的操作识别为一个功能 . 然后它将 dispatch 作为第一个参数注入，以便稍后允许调度其他操作 . 到目前为止，尚未在 addPersonSuccess 操作上调用 dispatch . 只有在异步调用添加人员之后才会在 addPersonSuccess 上调用调度 .

    我喜欢将其视为在thunk中传递redux上下文（dispatch，getState等） .
    参考

    回复于

相关问题