redux-sage
- 是异步获取数据的中间件
代码实现
文件夹
- App.js
import React, { Component } from 'react'
import store from './redux/store'
export default class App extends Component {
render() {
return (
<div>
<button onClick={() => {
if(store.getState().list1.length === 0) {
store.dispatch({
type: 'get-list1'
})
} else {
console.log('缓存', store.getState().list1)
}
}}>测试</button>
</div>
)
}
}
- store.js
import {createStore, applyMiddleware} from 'redux'
import reducer from './reducer'
import createSagaMiddleWare from 'redux-saga'
import watchSaga from './saga'
const SagaMiddleleWare = createSagaMiddleWare()
const store = createStore(reducer,applyMiddleware(SagaMiddleleWare))
SagaMiddleleWare.run(watchSaga) // saga任务
export default store
- saga.js
import { take, fork, put, call } from 'redux-saga/effects'
function* watchSaga() {
while (true) {
// take 监听 组件发来的action
yield take('get-list1')
// fork 同步执行
yield fork(getList)
}
}
function* getList() {
// 异步处理
// call函数发异步请求
let res = yield call(getLIstAction)
yield put({
type: 'change-list1',
payload: res
}
)
}
function getLIstAction() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(['111', '222', '333'])
})
})
}
export default watchSaga
- reducer.js
function reducer(prevState = {
list1: []
}, action = {}) {
var newState = { ...prevState }
switch (action.type) {
case 'change-list1':
newState.list1 = action.payload
return newState
default:
return prevState
}
}
export default reducer
dom
效果
