pwsaga

redux-saga 下载 npm install --save redux-saga

store/index.js

import { createStore, applyMiddleware } from 'redux' import createSaga from 'redux-saga' import { func } from './helloSaga' let initValue = { id: 10086, status: false }

let reducer = (state = initValue, action) => { switch (action.type) { case 'IS_LOGIN': state.status = action.flag; break; } return Object.assign({}, state, action) }

let saga = createSaga() //初始化saga const store = createStore(reducer, initValue, applyMiddleware(saga)) saga.run(func) //在store实例创建之后 ==> 用saga实例运行saga函数

export default store

在store/创建saga.js import { takeEvery, takeLatest, throttle, call, put, select } from 'redux-saga/effects' import axios from 'axios' const baseUrl = 'http://localhost:7002' export function* func() { yield takeEvery('login', function* () { //从reducer的返回值中取出需要的状态 let { user, pas } = yield select(state => state) const res = yield call(axios.post, baseUrl + '/api/login', { user, pas }) yield put({ type: 'IS_LOGIN', ...res }) })

yield takeLatest('search', function* () {
    // ...
})


yield throttle(2000, 'windowSize', function* () {

})

}

redux持久化+redux-saga

下载redux-persist ---store中------ import { createStore, applyMiddleware } from 'redux' import createsaga from 'redux-saga' import {persistReducer,persistStore} from 'redux-persist' import storage from 'redux-persist/lib/storage'; import { func } from './Saga' const initialstate = { list: [] }

创建一个本第存储 const persistConfig={ key:'state', storage, blacklist:['aaa'] //黑名单 不被永久保存的

} const reducer = (state = initialstate, action) => { switch (action.type) { case '': break; default: break; } return Object.assign({}, state, action) }

//持久化处理reducer const persistedReducer=persistReducer(persistConfig,reducer) //saga let saga = createsaga() const store = createStore(persistedReducer, initialstate,applyMiddleware(saga)) //持久化处理store saga.run(func) const persistor=persistStore(store) //抛出 export{ store, persistor }; -------在index中-------- import React from "react"; import ReactDOM from "react-dom"; import "./index.scss";
import { Provider } from 'react-redux'
import Router from './router' import {store,persistor} from './store' //永久存贮 import { PersistGate } from "redux-persist/integration/react"; //永久存贮 ReactDOM.render( , document.getElementById("root") );