React 基础笔记(Redux sage 版本)(十六)

Saga 和 chunk 不一样。thunk 是子弹形成前封装,Saga 是子弹发射出去后封装，相当于多了一步

(1) 安装 redux

 npm i redux -S

(2) 安装 redux-saga 插件

npm i redux-saga -S

(3)建立仓库模板

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

import reducer from './reducer'
import mySaga from './saga'

// create the saga middleware
const sagaMiddleware = createSagaMiddleware()
// mount it on the Store
const composeEnhancers =
  typeof window === 'object' && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
    ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({})
    : compose
const enhancer = composeEnhancers(applyMiddleware(sagaMiddleware))
const store = createStore(reducer, enhancer)

// then run the saga
sagaMiddleware.run(mySaga)

export default store

(4)新建 saga 文件,saga 子弹合并工厂

可以先写 yield 函数,里面就是 console.log 值

import { put, takeEvery } from 'redux-saga/effects'
function* initlist() {
  console.log("执行了)
}
function* mySaga() {
  yield takeEvery(MAKE_INIT, initlist)
}

export default mySaga

正式文件

import { put, takeEvery } from 'redux-saga/effects'
import { MAKE_INIT } from './actiontypes'
import { ACTION_INIT_LIST } from './actionCreater'
import axios from 'axios'
function* initlist() {
  let value = yield axios.get('/api/data1') //必须有yield
  let data = value.data
  let result = ACTION_INIT_LIST(data) //子弹做好了
  yield put(result) //必须有yield
}
function* mySaga() {
  yield takeEvery(MAKE_INIT, initlist)
}

export default mySaga

(5) reducer 文件

mport { CHANGE_VALUE, CLICK_CHANGE, DELETE_ITEM } from './actiontypes'

export default (state = defaultState, action) => {
  if (action.type === CHANGE_VALUE) {
    let newresult = JSON.parse(JSON.stringify(state))
    newresult.inputValue = action.value
    return newresult
  }
  if (action.type === CLICK_CHANGE) {
    let newState = JSON.parse(JSON.stringify(state))
    if (newData.inputValue != null) {
      newData.list.push(newData.inputValue)
      newData.inputValue = ''
    }
    return newData
  }
  // 这里就是删除方法,必须返回新数据
  if (action.type === DELETE_ITEM) {
    let newState = JSON.parse(JSON.stringify(state))
    newData.list.splice(action.value, 1)
    return newData
  }

  return state
}

(6) actiontype.js 和 actioncreater.js

actioncreater.js

import { CHANGE_VALUE, CLICK_CHANGE, DELETE_ITEM } from './actiontypes'

export const ACTION_CHANGE_VALUE = value => {
  return {
    type: CHANGE_VALUE,
    value
  }
}
export const ACTION_CLICK_CHANGE = () => {
  return {
    type: CLICK_CHANGE
  }
}
export const ACTION_DELETE_ITEM = value => {
  return {
    type: DELETE_ITEM,
    value
  }
}

actiontype.js

export const CHANGE_VALUE = 'change_value'
export const CLICK_CHANGE = 'click_change'
export const DELETE_ITEM = 'delete_item'

(7)在组件里面使用

在构造函数里面监听数据的改变


constructor(props){
  super(props)
  //获取仓库的数据就是store.getState()
  console.log(store.getState())
  // 输出的结果就是indexValue,list
  this.state = store.getState();
   this.storechange = this.storechange.bind(this)
    //监听,事件里面更新数据
    store.subscribe(this.storechange)
}

//方法里面直接更新数据
  storechange() {
    this.setState(store.getState())
  }