Redux-saga中间件
Redux-saga中间件
安装
npm install redux-saga --save
或
yarn add redux-saga
使用
1. 创建、使用、运行Redux-saga中间件
src/store/index.js
import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import createSagaMiddleware from 'redux-saga';
import reducer from './reducer';
import sagas from './sagas'; // 创建sagas.js
// window.__REDUX_DEVTOOLS_EXTENSION__ 可使用Redux DevTools插件
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({}) : compose;
// 创建Redux-saga中间件
const sagaMiddleware = createSagaMiddleware();
// 使用Redux-thunk中间件、Redux-saga中间件
const enhancer = composeEnhancers(applyMiddleware(thunk, sagaMiddleware));
// 创建store
const store = createStore(reducer, enhancer);
// 运行saga中间件
sagaMiddleware.run(sagas);
export default store;
2. 创建sagas.js
src/store/sagas.js
import { put, takeEvery } from 'redux-saga/effects';
import axios from 'axios';
import { initListAction } from './actionCreator';
// generator 函数
function* mySaga() {
// 接收 store.dispatch() 传过来的action
// 接收到get_init_list的action后,会调用getInitList方法
// getInitList可以执行异步操作
yield takeEvery('get_init_list', getInitList);
}
function* getInitList() {
try {
let list = [];
const res = yield axios.get('https://www.fastmock.site/mock/0764b93cba70add273910b232c51aad8/development/api/getHotList'); // 等待axios请求结束后,直接将结果赋值给res
if (res.data.data.length > 0) {
for (const val of res.data.data) {
list.push(val.name);
}
}
const action = initListAction(list);
yield put(action); // 类似于store.dispatch(action);
} catch (error) {
console.log(error);
}
}
export default mySaga;
3. action的统一管理
src/store/actionCreator.js
export const initListAction = list => ({
type: 'init_list',
list,
});
4. Reducer
src/store/reducer.js
const defaultState = {
list: [],
};
export default (state = defaultState, action) => {
let newState = JSON.parse(JSON.stringify(state)); // 深拷贝,不能直接修改state里的数据
if (action.type === 'init_list') {
newState.list = action.list;
}
return newState;
};
5. List.js
import { Component, Fragment } from 'react'; // 占位符
import store from './store/index';
import { List } from 'antd';
import 'antd/dist/antd.css';
class NewTodoList extends Component {
constructor(props) {
super(props);
this.state = store.getState();
store.subscribe(this.storeChange.bind(this)); // store发生改变时,自动触发
}
render() {
return (
<Fragment>
<List bordered dataSource={this.state.list} renderItem={(item, index) => <List.Item> {item} </List.Item>} />
</Fragment>
);
}
componentDidMount() {
const action = {
type: 'get_init_list',
};
store.dispatch(action); // action不仅会被reducer接收,还会被redux-saga接收
}
storeChange() {
this.setState(store.getState());
}
}
export default NewTodoList;