1.0.0 • Published 3 years ago

hsswebsaga v1.0.0

Weekly downloads
-
License
ISC
Repository
-
Last release
3 years ago

=======================

下载saga + redux持久化
cnpm i redux-saga redux-persist react-redux redux  -S

----------在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(
  <Provider store={store}>
    <PersistGate loading={null} persistor={persistor}>

    <Router />

    </PersistGate>
     </Provider>,
  document.getElementById("root")
);

========================

在store文件夹下创建一个saga.js文件
//引入
import { takeEvery, takeLatest, throttle, call, put ,select} from 'redux-saga/effects'
//引入axios
import axios from '../utils/request'


export function* func() {
    //数据
    //所有
    yield takeEvery('getlist', function*(){

        // let list = yield select(state=>state)
        const res=yield call(axios.get,'/api/list')

        console.log(res);

        yield put({

            type:'GET_LIST',
            Data:res.data.data
        })
    })

    //登录
    //防抖
    yield takeLatest('login',function*(){
        
         let {getobj} = yield select(state=>state)

         const res=yield call(axios.post,'/api/login',getobj)

        //  console.log(res);

        
         yield put({
 
             type:'IS_LOGIN',

            ...res
         })
    })


    //注册

    yield takeLatest('regirest',function*(){

        let {getobj} = yield select(state=>state)

        const res=yield call(axios.post,'/api/regirest',getobj)

        console.log(res);

       
        yield put({

            type:'REGIREST',

           ...res
        })
   })

}

========================