redux-saga中间件

懒得废话了，既然您找到这里，肯定知道要用 redux-saga 做什么事情了。
1、新建saga的文件夹， 例如 saga/home_saga.js

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

function* getHomeListFn(){
    yield put({type: 'xxxxx'})
    // 进行到这里是已经对页面触发的 dispatch 为 getHomeList_type做了拦截到了这里
    // 然后这里进行接口请求 对数据做处理后 再出发一次action
}

function* getHomeList() {
    yield takeEvery('getHomeList_type', getHomeListFn()) // 监听type类型以及触发事件
}

function* homeSaga_model() {
    yield all([getHomeList()]) // 数组类型， 可以同时监听多个saga事件
}

export default homeSaga_model;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

2、如何将 saga 文件进行注入

以 create-react-app 为例，index.js 文件之前使用了redux，大概是这种

import { createStore } from 'redux';
import { Provider } from 'react-redux';
import allStore from 'xxxx/xxx/index'; // reducer模块化，统一导出
...
let store = createStore(allStore);
...
 // 数据可以注入到页面中， 页面中使用connect就可以连接了
    xxxx

1
2
3
4
5
6
7
8
9

之后我们以这个为基础 再注入 saga

import { createStore, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import createSagaMiddleware from 'redux-saga';
import homeSagas from 'xxxx/xxxx/homeSaga.js';
import allStore from 'xxxx/xxx/index'; // reducer模块化，统一导出

...
let sagaMiddle = createSagaMiddleware();
let store = createStore(allStore, applyMiddleware(sagaMiddle));
// 通过 applyMiddleware 将saga注入到redux中，就可以进行监听，进行一个劫持
sagaMiddle.run(homeSagas)// 上一段已经注入saga了，这句话是运行写的单个saga文件，
...
 // 数据可以注入到页面中， 页面中使用connect就可以连接了
    xxxx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

一会我把代码看看上传到git， 地址链接