redux-saga Api介绍以及使用

• redux-saga是什么？
  • redux中的action仅仅支持原生对象（plain object）,处理有副作用的action，需要使用中间件。中间件可以在发出action，到reducer函数接收action之间，执行具体的副作用的操作。react-saga就是一个中间件
• react-saga 和react-thunk区别
  react-thunk是redux作者给吃的中间件，实现比较简单，源码如下

function createThunkMiddleware(extraArgument) {
  return ({ dispatch, getState }) => next => action => {
    if (typeof action === 'function') {
      return action(dispatch, getState, extraArgument);
    }
    return next(action);
  };
}
const thunk = createThunkMiddleware();
thunk.withExtraArgument = createThunkMiddleware;
export default thunk;

他判别的action的类型，如果是函数。则调用这个函数。react-thunk的有点就是简单，但是缺点也是显而易见的，thunk仅仅作为执行函数，并不在乎函数体内是什么，但是函数体内可以是多彩多样的。如果函数内部极为复杂，里面包括异步函数需要同步，导致thunk处理这类业务比较麻烦，而且action不容易维护。
react-saga action是plain-object（原始对象），并且集中处理了所以的异步操作。react-saga是使用ES6中的js函数生成器来处理，让异步函数能够同步化。

• 下面的例子是简单是使用和介绍下react-saga中api的用法和实现一个累加器的功能

1. 首先创建一个saga.js文件文件，里面包括一个js函数器

import {takeEvery,call,put,fork,take, select} from 'redux-saga/effects'
import {CountServer} from '../action/call'
function *saga (onj){
    console.log("saga..............",onj);
    // let msg = yield fork(CountServer.incress)//代表异步
    const number = yield select(state=>state) //当前state的值
    console.log("number",number);
//   let msg =   yield call(CountServer.incress)
//   console.log(msg); //123
    yield put({type:"add"})
}
function * watchIncrement(){
        yield takeEvery("count",saga)
}
export default watchIncrement

• takeEvery :表示每次都执行js函数生成器（一般使用这个）
• take: 表示只执行一次
• call：调用异步方法，并且让它同步执行
• fork: 调用异步方法，并且是异步执行
• select: 查询当前state的值
• put：类似dispatch方法

2. 创建reducer.js文件,并且设置中间件react-saga

import {applyMiddleware, createStore}  from 'redux'
import createSagaMiddleware from "redux-saga";
import watchIncrement  from './gSaga'
const Reducer = (state = 0,action) =>{
    if (action.type =="add"){
        console.log("state:",state);
        state = state +1
        return state
    }
    return state
}
const saga = createSagaMiddleware()
const store = createStore(Reducer,applyMiddleware(saga))
saga.run(watchIncrement)
export default store

3. 创建组件，并且使用高阶组件connect包装起来

import { connect } from "react-redux"
import {incress} from '../action/count'
const IndexPage = (props) =>{
    const {state,add} = props
    return (
        <div>
            dddddd{state}
            <button onClick={e=>add()}>增加</button>
        </div>
    )
}
export default connect(state =>({state}),{add:incress})(IndexPage)

• 注意：如果不想使用connect来包装组件，可以使用useSelect和useDispatch操作，不过注意一点的是在点击方法中，必须使用dispatch包装一下，不然不起作用。个人喜欢使用connect的方式来操作

4. 最后需要使用react-redux来包装一下store

import  store1 from './saga/store/index' //创建带中间件的store
    <Provider store={store1}>
   <Sindex/>
   </Provider>,

• 总结 如果使用react来做项目的话，一般需要使用redux、react-redux、react-saga/react-thunk、react-router、react-dom来构建项目。一个个的引入，比较麻烦，因为我比较推荐使用dvajs来构建项目。他包括上面说的所有东西，操作起来也比较方便.