react+redux的升级版todoList的实现(3)

日期：2020-05-11 栏目：程序人生浏览：次

connect方法有四个参数，这里主要说下前两个参数：

（1）mapStateToProps：参数为state，返回页面所需要的所有state；

（2）mapDispatchToProps：参数为dispatch，返回页面所要使用的异步回调函数。

眼明手快的你肯定看到了，我们从redux包中导出了bindActionCreators方法，该方法将dispatch和action creator绑定，用来触发action。

四. 异步的action creator如何触发呢？

因为每个action creator都是异步函数，我们传给组件的只是函数的声明，所以就要引入我们的中间件，只用在生成store时加入就行了：

/*redux/configureStore.js*/
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import reducers from './reducers';
const initialState = {
  taskListData: {
    loading: false,
    error: false,
    taskList: [],
  }, 
  userData: {
    loading: false,
    error: false,
    user: {},
  },
  noticeListData: {
    loading: false,
    error: false,
    noticeList: [],
  },
  taskData: {
    loading: false,
    error: false,
    task: {},
  }
};
let enhancer = applyMiddleware(thunk);
let store = createStore(
  reducers,
  initialState,
  enhancer,
);
export default store;

在上面的代码中thunk就是一个中间件，我们将引入的中间件传入applyMiddleware就可以了。

五. store在哪里传入组件呢？

我们肯定会想到，store在整个应用中都存在，所以应该在整个应用的最顶层，对于一般项目而言，当然就是最顶端的路由了：

import React, { Component } from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import { Provider } from 'react-redux';
import BasicLayout from '../layouts';
import store from '../redux/configureStore';
class RouterApp extends Component {
  render () {
    return (
      <Provider store={store}>
        <Router>
          <Route path="/" component={BasicLayout} />
        </Router>
      </Provider>
    );
  }
}
export default RouterApp;

Provider是react-redux的一个组件，作用就是用来将store传入整个应用。

基本要讲的就是这些内容，完整的项目请看 github
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持黑区网络。

react+redux的升级版todoList的实现(3)

相关推荐