从零开始搭建一个react项目开发(9)

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

在 modules 文件中新建 'toDoApp.js'，注意这里的命名是依据容器组件的名字来命名，这个也是规范，容易管理代码。

现在我们可以开始创建initial state和 reducer function，这其实非常简单，state就是一个js对象，reducer就是js的switch语句：

const initialState = {}; //The initial state of this reducer (will be combined with the states of other reducers as your app grows)

export default function reducer(state = initialState, action){ // a function that has two parameters, state (which is initialized as our initialState obj), and action, which we'll cover soon.
 switch (action.type){
 default:
  return state;
 }
}

4. 完善Store

现在我们已经完成了第一个reducer，可以将其添加到 configureStore.js 中去了，导入： import toDoApp from './modules/toDoApp';

然后用combineReducers 来组合当前的reducer，因为未来会有更多的模块加入。

const reducer = combineReducers({
 toDoApp
});

最后在底部加入下面完整的代码：

const configureStore = (initialState) => createStoreWithMiddleware(reducer, initialState);
export default configureStore;
Cool. We're done here.

5. Connect

现在我们已经有了一个reducer，那么怎么和app建立联系呢？这需要两步工作。

前面已经讲过类组件和函数型组件，有时候也可以称为smart components和dumb components，这里我们新增一种容器组件，顾名思义，这种组件就是作为一个容器用来给组件提供actions和state。

下面来创建第一个容器组件，首先在 /src/ 下新增一个文件夹containers，然后再其下面新建一个文toDoAppContainer.js。

在文件顶部首先导入 connect 用来将容器和组件联系在一起，

import { connect } from 'react-redux';
import ToDoApp from '../components/ToDoApp.js'

connect 这个函数被调用两次, 第一次是两个回调函数: mapStateToProps and mapDispatchToProps。第二次是把state和dispatch传入组件的时候。这里的dispatch又是什么呢？

当我们需要在redux中发生某些行为时候，就需要调用dispatch函数传递一个action然后调用reducer这一套流程。因为我们还没有编写具体的行为，这里就暂时空白，后面再补，代码形式如下：

function mapStateToProps(state) {
 return {
  toDoApp: state.toDoApp // gives our component access to state through props.toDoApp
 }
}

function mapDispatchToProps(dispatch) {
 return {}; // here we'll soon be mapping actions to props
}

然后在底部添加：

export default connect(
 mapStateToProps,
 mapDispatchToProps
)(ToDoApp);

转载注明出处：http://www.heiqu.com/205.html

从零开始搭建一个react项目开发(9)

相关推荐