【一起來學React】- Reudx學習(二)
阿新 • • 發佈:2019-01-09
上篇文章我們說到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
安裝:
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