React-Redux整合与redux持久化
🚀🚀首发:CSDN碰磕,学无止境
🌞🌞🌞晴28°
✊✊Better to light one candle than to curse the darkness.
📅2022/6/22
React-Redux
安装
npm i react-redux
使用
主要使用:
connect
与Provider
配合完美替换了
dispatch
和subscribe
🌼1.在入口文件将显示的内容使用provider包裹
并且传递store从而公共使用
<Provider store={store}>
<Zhuye2 />
</Provider>
🌼2.在组件中通过connect进行通信订阅
connect
(将来给孩子传的属性,将来给孩子传的回调函数)
使用前不要忘记引入
import { connect } from 'react-redux';
export default connect((state)=>{
console.log(state)
return{
isShow:state.TabbarReducer.isShow
}
})(Zhuye2)
根据之前的案例在NotFound
组件中进行通知
//connect(将来给孩子传的属性,将来给孩子传的回调函数)
export default connect(null,{
hide(){
return{
type:"404传的消息",
isShow:false
}
},
show(){
return{
type:"404传的消息",
isShow:true
}
}
})(NotFound)
通过props
.函数名进行调用…
import React, { useEffect } from 'react';
import { connect } from 'react-redux';
// import store from '../redux/store';
function NotFound(props){
useEffect(()=>{
console.log(props)
// console.log("进入404")
//store.dispatch通知
// store.dispatch({
// type:"404传的消息",
// val:"碰磕",
// isShow:false
// })
props.hide()
return()=>{
console.log("销毁...");
props.show()
}
},[])
return (
<div>
404
</div>
);
}
//connect(将来给孩子传的属性,将来给孩子传的回调函数)
export default connect(null,{
hide(){
return{
type:"404传的消息",
isShow:false
}
},
show(){
return{
type:"404传的消息",
isShow:true
}
}
})(NotFound)
这样就完美替换了dispatch
redux持久化(redux-persist)
官网:[redux-persist - npm (npmjs.com)](redux-persist - npm (npmjs.com))
安装
npm i redux-persist
使用
store.js中
/**
* Redux
*/
//1、引入redux
//2.createStore(reducer)
import {applyMiddleware, combineReducers, createStore,compose} from 'redux';
import CinemaListReducer from './reducers/CinemaListReducer';
import CityReducer from './reducers/CityReducer';
import TabbarReducer from './reducers/TabbarReducer';
import reduxThunk from 'redux-thunk'
import reduxPromise from 'redux-promise'
/**redux持久化 */
import { persistStore, persistReducer } from 'redux-persist'
import storage from 'redux-persist/lib/storage'
const persistConfig = {
key: 'pengke',
storage,
whitelist:['CityReducer'] //只持久化城市的reducer
}
const reducer=combineReducers({
CityReducer,
TabbarReducer,
CinemaListReducer
})
const persistedReducer = persistReducer(persistConfig, reducer)
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(persistedReducer,composeEnhancers(applyMiddleware(reduxThunk,reduxPromise)))
let persistor = persistStore(store);
export{
store,
persistor
}
在之前的案例上做改变
引入----定义本地存储-----persistReducer增强----persistStore(store)—导出(store,persistor)
Tip
:whitelist:设置只持久化的(白名单)
这样就实现了redux的持久化🆗