redux结合saga

redux

1.action

State 的变化，会导致 View 的变化。但是，用户接触不到 State，只能接触到 View。所以，State 的变化必须是 View 导致的。Action 就是 View 发出的通知，表示 State 应该要发生变化了。

Action 是一个对象。其中的type属性是必须的，表示 Action 的名称。其他属性可以自由设置，社区有一个规范可以参考。

const action = {type: 'ADD_TODO',payload: 'Learn Redux'
};

2.action creator

View 要发送多少种消息，就会有多少种 Action。如果都手写，会很麻烦。可以定义一个函数来生成 Action，这个函数就叫 Action Creator。

import { GETLIST } from "./actionTypes";export const getlist = () => {return {type:GETLIST}
}

3.state

Store对象包含所有数据。如果想得到某个时点的数据，就要对 Store 生成快照。这种时点的数据集合，就叫做 State。

当前时刻的 State，可以通过store.getState()拿到

import { applyMiddleware,createStore } from "redux";
import { Map } from 'immutable'
import reducer from "./reducer";import createSagaMiddleware from 'redux-saga'
import sagas from './sagas'const sagaMiddleware = createSagaMiddleware()const store =  createStore(reducer,Map([]),applyMiddleware(sagaMiddleware)
)sagas.forEach(saga => sagaMiddleware.run(saga))export default store

4.Reducer

Store 收到 Action 以后，必须给出一个新的 State，这样 View 才会发生变化。这种 State 的计算过程就叫做 Reducer。

import { Map,List } from 'immutable'
import { LOADLIST } from './actionTypes'const defaultState = Map({doclist:List([])
})export default (state = defaultState , action) => {switch(action.type){case LOADLIST:return state.updateIn(['doclist'],()=>action.doclist)default:return state}
}

5. store.dispatch()

store.dispatch()是 View 发出 Action 的唯一方法

import React,{ useEffect } from 'react'
import Swiper2 from './Swiper2'
// import Swiper3 from './Swiper3'
import FindDoctorContainerUi from './FindDoctorContainerUi'
import { useDispatch } from 'react-redux'
import { getlist } from '../index'
import { useSelector } from 'react-redux'
import { FindDoctorMainWrapper } from './styledFindDoctorContainer'export default function FindDoctorContainer() {const dispatch = useDispatch()const docList = useSelector(state => state.getIn(['findDoc','doclist']))useEffect( () => {dispatch(getlist())},[])return (<FindDoctorContainerUi doclist={docList}></FindDoctorContainerUi>)
}

6.sagas

用于异步请求数据

sagas里面的一些参数：

​ fork:创建一个新的进程或者线程并发请求

​ call：发送api请求

​ put：发送对应的dispatch，触发对应的action

​ takeEvery：监听对应的action，每已次dispatch都会触发

​ takeLatest：监听对应的action，只会触发最后一次dispatch（触发一次动作后，又不断的触发动作，在一定的时间内。只有最后一次触发有效）

​ call：和fork一样同时发出多个action

import $http from '@/utils/http'
import { put, takeEvery, call } from 'redux-saga/effects'
import { GETLIST, LOADLIST } from './actionTypes'function* foo2(){let result = yield call($http.get, {url:'http://localhost:9000/docList'})yield put({type: LOADLIST,doclist:result.data.data})
}function* saga(){yield takeEvery(GETLIST, foo2)
}
export default saga

主要api

createStore（reducer，[preloadStore], enhancer）

Store

combineReducers(reducers)

applyMiddleware(…middlewares)

bindActionCreators

compose

redux-saga/effects

1.fork

创建一个进程或线程并发送请求

function* user() {yield takeEvery('FETCH_REQUEST', fetch_user); // 监听 FETCH_REQUEST action
}// 并发发送请求
function* fetch_user() {const [users, todos] = [yield fork(fetchResource, 'https://jsonplaceholder.typicode.com/users'),yield fork(fetchResource, 'https://jsonplaceholder.typicode.com/todos')]
}function* fetchResource(resource) {const data = yield call(axios.get, resource);// 获取 call 数据，触发成功后的 actionyield put({ type: 'FETCH_SUCESS', uu: data });
}

2.call

发送api请求

3.put

发送对应的dispatch并触发action

4.takeEvery

监听对应的 action；
每一次 dispatch 都会触发；例如：点击一个新增的按钮，2s 后触发新增动作，在2s内不断点击按钮，这时候，每一次点击，都是有效的。

5.takeLatest

监听对应的 action；
只会触发最后一次 dispatch；例如：点击一个新增的按钮，2s 后触发新增动作，在2s内不断点击按钮，这时候，只有最后一次点击是有效的。

6.all

跟 fork 一样，同时并发多个 action，没有顺序。

const rootUser = [user(),todo()
];yield all([ // 同时并发多个...rootUser, // add()
]);