配置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;
//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
};
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;
}
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')
)
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没多久,有什么不足希望大家多多指出