如何从传奇中发送 thunk？

IT技术 javascript reactjs redux redux-thunk redux-saga
2021-05-22 18:10:58

我知道我不应该试图从 saga 中发送 thunk，这与 redux-saga 试图做的事情背道而驰。但我在一个相当大的应用程序中工作，大部分代码都是用 thunk 编写的，我们正在逐位迁移，需要从 saga 内部发送一个 thunk。thunk 不能改变，因为它被用在其他部分（一个返回 promise 的 thunk），所以它会破坏很多东西。

配置存储：

const store = createStore(
  rootReducer,
  initialState,
  compose(applyMiddleware(thunk, sagaMiddleware))
);

传奇：

// Saga (is called from a takeEvery)
function* watchWarehouseChange(action) {
  const companyId = yield select(Auth.id);

  // We use cookies here instead of localStorage so that we persist
  // it even when the user logs out. (localStorage clears on logout)
  yield call(Cookies.set, `warehouse${companyId}`, action.warehouse);

  // I want to dispatch a thunk here
  yield put.resolve(syncItems);
  // put(syncItems) doesn't work either
}

沉思：

export function syncItems() {
  console.log('first!');

  return dispatch => {
    console.log('second!');

    return dispatch(fetchFromBackend()).then(
      items => itemsDB.emptyAndFill(items)
    )
  }
}

每当syncItems()执行时，只first!记录。second!永远不会发生。

PS：我没有收到任何错误或警告。

3个回答

你用syncItems错了。关键是返回syncItems的函数需要传递给dispatch，而不是syncItems它本身。正确的用法是：

yield put(syncItems());

我dispatch在我的博客文章Idiomatic Redux:Why use action creators 中展示了一些关于如何传递值的视觉比较。（基于我放在一起的示例要点）。以下是示例：

// approach 1: define action object in the component
this.props.dispatch({
    type : "EDIT_ITEM_ATTRIBUTES", 
    payload : {
        item : {itemID, itemType},
        newAttributes : newValue,
    }
});

// approach 2: use an action creator function
const actionObject = editItemAttributes(itemID, itemType, newAttributes);
this.props.dispatch(actionObject);

// approach 3: directly pass result of action creator to dispatch
this.props.dispatch(editItemAttributes(itemID, itemType, newAttributes));

// parallel approach 1: dispatching a thunk action creator
const innerThunkFunction1 = (dispatch, getState) => {
    // do useful stuff with dispatch and getState        
};
this.props.dispatch(innerThunkFunction1);

// parallel approach 2: use a thunk action creator to define the function        
const innerThunkFunction = someThunkActionCreator(a, b, c);
this.props.dispatch(innerThunkFunction);

// parallel approach 3: dispatch thunk directly without temp variable        
this.props.dispatch(someThunkActionCreator(a, b, c));

在你的情况，刚刚替补yield put的this.props.dispatch，因为你是从传奇，而不是连接的组件调度。

使用https://github.com/czewail/bind-promise-to-dispatch包

在 saga func 中添加解析和拒绝参数

然后使用这个包 func wrap this.props.dispatch

然后你可以使用它Promise

如果您阅读了redux-saga的文档并专门调用并放置：

称呼：

fn：Function - 一个 Generator 函数，或者普通函数，它返回一个 Promise 作为 result，或者任何其他值。

放：

创建一个 Effect 描述，指示中间件将操作放入提供的通道中。

从技术上讲，thunk 会返回一个 Promise，这就是您可以await调度 thunk 的原因：

export declare type AsyncThunkAction<Returned, ThunkArg, ThunkApiConfig extends AsyncThunkConfig> = (dispatch: GetDispatch<ThunkApiConfig>, getState: () => GetState<ThunkApiConfig>, extra: GetExtra<ThunkApiConfig>) => Promise<ReturnType<AsyncThunkFulfilledActionCreator<Returned, ThunkArg>> | ReturnType<AsyncThunkRejectedActionCreator<ThunkArg, ThunkApiConfig>>> & {
    abort(reason?: string): void;
    requestId: string;
    arg: ThunkArg;
};

这意味着您可以执行以下操作来从 saga 发送 thunk：

yield put(
  yield call(syncItems)
);

该call方法返回action您的syncItemssaga的 redux ，该方法将使用它put来分派您的操作。

其它你可能感兴趣的问题
上一篇设置 TextField InputProps 时，Material-UI 自动完成不起作用 下一篇在 Next.js 应用程序中生成动态 /robots.txt 文件