第二十五章：redux-saga

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

效果