前情
Steemit 的几个前端项目（condenser, wallet, faucet）都使用了 redux 和 redux-saga。
这次升级 faucet 所有依赖库，发现新版本 redux 推荐使用官方的 @reduxjs/toolkit 工具集来实现 redux 的功能。
既然 redux 的官方推荐使用工具集，那么这次升级我们也要相对应的把原有的 redux 相关代码做改动。
其中，为了应对复杂的异步请求而引入的 redux-saga，我不是很确定是否与工具集兼容，因此投入了时间来研究了一下。
如何将 redux-saga 与 @reduxjs/toolkit 一起使用
创建 Redux Store:
@reduxjs/toolkit提供了configureStore来简化store的创建过程。你可以将redux-saga中间件添加到store中。创建并运行 Saga 中间件: 使用
redux-saga的createSagaMiddleware来创建saga中间件，然后将其添加到configureStore中。运行你的
Saga: 在configureStore创建store后，使用sagaMiddleware.run来启动你的saga。
下面是简单的例子。
store.js 文件
// store.js
import { configureStore } from '@reduxjs/toolkit';
import createSagaMiddleware from 'redux-saga';
import rootReducer from './reducers'; // 你的 reducer
import rootSaga from './sagas'; // 你的 saga
// 创建 Saga 中间件
const sagaMiddleware = createSagaMiddleware();
// 配置 store 并添加 saga 中间件
const store = configureStore({
reducer: rootReducer,
middleware: (getDefaultMiddleware) =>
getDefaultMiddleware().concat(sagaMiddleware), // 添加 saga 中间件
});
// 运行 rootSaga
sagaMiddleware.run(rootSaga);
export default store;
saga.js 文件
// sagas.js
import { call, put, takeLatest } from 'redux-saga/effects';
import axios from 'axios';
// worker saga
function* fetchUser(action) {
try {
const response = yield call(axios.get, `/api/user/${action.payload.userId}`);
yield put({ type: 'USER_FETCH_SUCCESS', payload: response.data });
} catch (error) {
yield put({ type: 'USER_FETCH_FAILURE', error: error.message });
}
}
// watcher saga
function* rootSaga() {
yield takeLatest('USER_FETCH_REQUEST', fetchUser);
}
export default rootSaga;
ET碎碎念，每周更新，欢迎订阅，点赞，转发！
好用不贵的VPS推荐
感谢你的阅读，我是中文区见证人之一，欢迎通过 AuthSteem 来给我投票，或者打开 https://steemitwallet.com/~witnesses 页面，输入 ety001 进行投票。
中文区的见证人目前有：
支持一下他们（按字母顺序），一人可以有30票：
Thank you for reading. I'm a witness. I would really appreciate your witness vote! You can vote by SteemLogin. Or open https://steemitwallet.com/~witnesses page, input ety001 to vote.
