上篇文章我們說到redux一些基礎和在react中如何運用。本文講解在react中如何更加優雅的編寫redux！
上一篇文章地址：https://blog.csdn.net/Fakin/article/details/85287116

非同步Action

在redux中非同步的Action只能依靠中介軟體，沒有中介軟體Redux儲存只支援同步資料流。

• redux-promise或redux-promise-middleware來派遣Promises
• redux-observable來排程Observable
• redux-saga
• redux-pack
• redux-thunk

這些中介可以讓你使用非同步的Action，這裡咱們主要介紹redux-thunk(因為redux-thunk比較常用，而且易上手)

Middleware

說到redux-thunk，必須得說下Middleware,
它提供的是位於 action 被髮起之後，到達 reducer 之前的擴充套件點。 你可以利用 Redux middleware 來進行日誌記錄、建立崩潰報告、呼叫非同步介面或者路由等等

import  {createStore, applyMiddleware} from 'redux';
import reducer from
 
 './reducer';
import thunk from 'redux-thunk'
const store = createStore(reducer,
    applyMiddleware(thunk)
);

export default store

上面是一個簡單，applyMiddleware是redux幫我們實現的Middleware方法，有了這個方法就可以更加簡單些。

redux-thunk

來自redux官方，能夠幫助我們傳送非同步的Action

github

安裝:

npm install redux-thunk

示例：

import {
 
GET_BANNER_ACTION} from './actionTypes'
import axios from 'axios'
export const getBanner = () => {
    return (dispatch) => {
        axios.get('/api/banner.json').then(res => {
            if (res.data.message === 'ok') {
                const action = {
                    type: GET_BANNER_ACTION,
                    data: res.data.list
                };
                dispatch(action)
            }
        })
    }
};

//然後在元件中利用react-redux
const mapStateToProps = (state) => {
    return {
        banner: state.home.banner,
    }
};
const mapDispatchToProps = (dispatch) => {
    return {
        getBannerList(){
            dispatch(actionCreatros.getBanner())
        }
    }

}
export default connect(mapStateToProps, mapDispatchToProps)(Home);

//在需要的地方呼叫
componentDidMount() {
    this.props.getBannerList();
}

更加優雅的Reducer

上一篇文章中我們介紹過Reducer，本文來說說combineReducers.

具體介紹可以檢視官網https://redux.js.org/api/combinereducers,
這裡我們就介紹下它的用法。

import {combineReducers} from 'redux'
import {reducer as homeReducer} from '../page/home/store'
import {reducer as detailReducer} from '../page/detail/store'
import {reducer as searchReducer} from '../page/search/store/index'
const reducer = combineReducers({
    home: homeReducer,
    detail: detailReducer,
    search: searchReducer
});
export default reducer

這麼做的目的是為了更好的區分不同的reducers，然後我們的程式碼更加的優雅和容易維護！

與React-Router

redux配合React-Router使用，也是非常關鍵的。

import {Provider} from 'react-redux';
import store from './store'

const Root = ({ store }) => (
  <Provider store={store}>
    <Router>
      <Route path="/" component={App} />
    </Router>
  </Provider>
)

export default Root

ps：很多人都喜歡把所有的state全部交給redux管理，這一點我不是這樣的，我把需要共享的資料交給redux，其他的還是交給元件內的state