記錄一次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);