react-redux持久化储存-redux-persist

redux-persist插件

配置store.ts

import { createStore } from 'redux';
import {AllReducers} from './reducers/index';
/引入持久化储存插件
import {persistStore, persistReducer} from 'redux-persist';
// 本地储存
// import storage from 'redux-persist/lib/storage';
// 会话储存
import storageSession from 'redux-persist/lib/storage/session';
import autoMergeLevel2 from 'redux-persist/lib/stateReconciler/autoMergeLevel2';
const persistConfig = {
    key: 'root',
    storage: storageSession,//缓存机制
    stateReconciler: autoMergeLevel2 // 查看 'Merge Process' 部分的具体情况
};
const myPersistReducer = persistReducer(persistConfig, AllReducers)

const store = createStore(myPersistReducer)

export const persistor = persistStore(store)

export default store;

reducers/index.ts

//index.js
//combineReducers方法，用于 Reducer 的拆分，便于以后添加其他函数
import { combineReducers } from "redux";
import UserData from "./UserData";
import IsLogin from "./islogin";
import Tabs from "./tabs";
const AllReducers: any = combineReducers({
	UserData,
	IsLogin,
	Tabs
})
export  {
	AllReducers
};

其中之一的islogin.ts

const Root = JSON.parse(sessionStorage.getItem("persist:root") || "{}");
const defaultState = Root.UserIsLoginData || false;
export default (state = defaultState, action: any) => {
	if (action.type === "modify_islogin") {
		// 深拷贝，reducer不允许直接修改state
		let newState = JSON.parse(JSON.stringify(state));
		newState = action.value;
		return newState;
	}
	return state;
}

main.ts

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
//引入相关文件，并对根组件进行包裹，传入store
//这样一来，App的所有子组件就默认都可以拿到state了
import { Provider } from 'react-redux';
import store from "@/redux/store";

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>
  ,
  document.getElementById('root')
)

App.jsx

import React, { Component } from 'react'
import { connect } from "react-redux";

import Login from './pages/login/index'
import Container from './pages/container/index'

class App extends Component {
    render() {
        const { UserData, IsLogin } = this.props;
        // console.log(this.props) 
        return (IsLogin ? <Container UserData={UserData} IsLogin={IsLogin}></Container> : <Login store={this.props}></Login>);
    }
}
const mapStateToProps = (state) => {
    return {
        UserData: state.UserData,
        Tabs: state.Tabs,
        IsLogin: state.IsLogin
    }
}
const mapDispatchToProps = (dispatch) => {
    return {
        onModify: (type) => dispatch(type),
        onRemove: () => dispatch({ type: 'remove' })
    }
}
export default connect(mapStateToProps, mapDispatchToProps)(App);

ps: 才开始写react没多久，有什么不足希望大家多多指出