Reudx学习(二)

上篇文章我们说到redux一些基础和在react中如何运用。本文讲解在react中如何更加优雅的编写redux!

异步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