Redux-Saga源码解析(一) 初始化和take

简介

Redux-Saga是一个用于管理Redux的Side Effect的库。它使用Generator函数来定义异步任务，并使用中间件将这些任务与Redux store连接起来。Redux-Saga是一个非常强大的工具，可以用来处理各种各样的异步任务，例如：

• 从服务器端获取数据
• 将数据持久化到本地存储
• 响应用户交互
• 定时任务

初始化流程

Redux-Saga的初始化流程非常简单。首先，你需要在你的项目中安装Redux-Saga。然后，你可以在你的Redux store中使用applyMiddleware方法来应用Redux-Saga中间件。最后，你就可以开始定义你的Saga任务了。

1. 安装Redux-Saga

npm install redux-saga

2. 应用Redux-Saga中间件

import { createStore, applyMiddleware } from 'redux';
import createSagaMiddleware from 'redux-saga';

const sagaMiddleware = createSagaMiddleware();

const store = createStore(
  reducer,
  applyMiddleware(sagaMiddleware)
);

3. 定义Saga任务

import { takeEvery, call, put } from 'redux-saga/effects';

function* fetchUserData(action) {
  const user = yield call(fetchUser, action.payload.userId);
  yield put({ type: 'USER_FETCHED', payload: { user } });
}

function* watchFetchUserData() {
  yield takeEvery('FETCH_USER_DATA', fetchUserData);
}

export default function* rootSaga() {
  yield all([
    watchFetchUserData()
  ]);
}

take效应

take效应是最基本的Saga效应之一。它用于监听Redux store中的特定action。当该action被分发时，take效应就会被触发，并将控制权交给相应的Saga任务。

语法

take(pattern)

参数

• pattern：要监听的action的类型。可以是一个字符串、一个正则表达式或一个函数。

返回值

一个Promise对象，当相应的action被分发时，该Promise对象就会被解析。

示例

import { takeEvery, call, put } from 'redux-saga/effects';

function* fetchUserData(action) {
  const user = yield call(fetchUser, action.payload.userId);
  yield put({ type: 'USER_FETCHED', payload: { user } });
}

function* watchFetchUserData() {
  yield takeEvery('FETCH_USER_DATA', fetchUserData);
}

export default function* rootSaga() {
  yield all([
    watchFetchUserData()
  ]);
}

在这个示例中，watchFetchUserData Saga任务使用takeEvery效应来监听FETCH_USER_DATA action。当该action被分发时，fetchUserData Saga任务就会被触发，并将控制权交给相应的Saga任务。

总结

Redux-Saga是一个非常强大的工具，可以用来处理各种各样的异步任务。它使用Generator函数来定义异步任务，并使用中间件将这些任务与Redux store连接起来。Redux-Saga的初始化流程非常简单，只需要安装Redux-Saga，应用Redux-Saga中间件，并定义你的Saga任务即可。take效应是最基本的Saga效应之一，它用于监听Redux store中的特定action。当该action被分发时，take效应就会被触发，并将控制权交给相应的Saga任务。