- 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的用法和实现一个累加器的功能
- 首先创建一个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方法
- 创建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
- 创建组件，并且使用高阶组件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的方式来操作
- 最后需要使用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来构建项目。他包括上面说的所有东西，操作起来也比较方便.
