记录一次redux使用过程

话说好记性不如烂笔头，记录下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);