话说好记性不如烂笔头,记录下redux使用过程,方便下次复制用,哈哈
仅做记录使用,不详细解释redux原理
用到的插件 :redux、react-redux、redux-persist、redux-thunk
1、redux/actions/counter.js
// action也是函数
export function setPageTitle (data) {
return (dispatch, getState) => {
dispatch({ type: 'SET_PAGE_TITLE', data: data })
}
}
export function setInfoList (data) {
return (dispatch, getState) => {
// 使用fetch实现异步请求
dispatch({ type: 'SET_INFO_LIST', data: data })
}
}
export function setPower (data) {
return (dispatch, getState) => {
// 使用fetch实现异步请求
dispatch({ type: 'SET_POWER', data: data })
}
}
2、redux/reducers/counter.js
// 工具函数,用于组织多个reducer,并返回reducer集合
import {combineReducers} from 'redux'
/*
* 初始化state
*/
const initState = {
pageTitle: '首页',
infoList: [],
power:{}
};
/*
* reducer
*/
// 一个reducer就是一个函数
function pageTitle (state = initState.pageTitle, action) {
// 不同的action有不同的处理逻辑
switch (action.type) {
case 'SET_PAGE_TITLE':
return action.data
default:
return state
}
}
function infoList (state = initState.infoList, action) {
switch (action.type) {
case 'SET_INFO_LIST':
return action.data
default:
return state
}
}
function power (state = initState.power, action) {
switch (action.type) {
case 'SET_POWER':
return action.data
default:
return state
}
}
// 导出所有reducer
export default combineReducers({
pageTitle,
infoList,
power
})
3、redux/store.js
// index.js
// applyMiddleware: redux通过该函数来使用中间件
// createStore: 用于创建store实例
import { applyMiddleware, createStore } from 'redux'
// 中间件,作用:如果不使用该中间件,当我们dispatch一个action时,需要给dispatch函数传入action对象;但如果我们使用了这个中间件,那么就可以传入一个函数,这个函数接收两个参数:dispatch和getState。这个dispatch可以在将来的异步请求完成后使用,对于异步action很有用
import thunk from 'redux-thunk'
// 引入reducer
import reducers from './reducers/counter'
//redux-persist持久化插件
import { persistStore, persistReducer } from 'redux-persist'
import storage from 'redux-persist/lib/storage/session' // defaults to sessionStorage for web
const persistConfig = {
key: 'root',
storage: storage
};
const myPersistReducer = persistReducer(persistConfig, reducers)
const store = createStore(myPersistReducer,applyMiddleware(thunk))
export const persistor = persistStore(store)
export default store
4、index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './router/router';
// import App from './components/layout/layout.mainbody';
import * as serviceWorker from './serviceWorker';
import './assets/iconfont/iconfont.css'
import "./index.css"
import {Provider} from 'react-redux'
import store from './redux/store'
import {persistor} from './redux/store'
import 'element-theme-default';
import "./assets/css/base.css"
import {PersistGate} from 'redux-persist/integration/react'
ReactDOM.render(
<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
<App/>
</PersistGate>
</Provider>,
document.getElementById('root'));
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();
5、使用方法
赋值:
import {connect} from 'react-redux';
import {setPower} from '../../redux/actions/counter'
省略
。。。
this.props.setPower(xxx) //赋值方法
。。。
省略
const setPowerFun = dispatch=>({
setPower:e=>dispatch(setPower(e))
});
export default connect(setPowerFun)(login);
取值:
import {connect} from 'react-redux';
省略
console.log(this.props.pageTitle) //取值方法
省略
const getPageTitle = state => {
return {
pageTitle: state.pageTitle
}
}
export default connect(getPageTitle)(login);