分享一个 react + redux 完整的项目,同时写一下个人感悟

#23

react-redux

如果只使用redux,那么流程是这样的:

component --> dispatch(action) --> reducer --> subscribe --> getState --> component

用了react-redux之后流程是这样的:

component --> actionCreator(data) --> reducer --> component

store的三大功能:dispatch,subscribe,getState都不需要手动来写了。react-redux帮我们做了这些,同时它提供了两个好基友Provider和connect。

Provider是一个组件,它接受store作为props,然后通过context往下传,这样react中任何组件都可以通过contex获取store。也就意味着我们可以在任何一个组件里利用dispatch(action)来触发reducer改变state,并用subscribe监听state的变化,然后用getState获取变化后的值。但是并不推荐这样做,它会让数据流变的混乱,过度的耦合也会影响组件的复用,维护起来也更麻烦。

**connect --connect(mapStateToProps, mapDispatchToProps, mergeProps, options)**是一个函数,它接受四个参数并且再返回一个函数–wrapWithConnect,wrapWithConnect接受一个组件作为参数wrapWithConnect(component),它内部定义一个新组件Connect(容器组件)并将传入的组件(ui组件)作为Connect的子组件然后return出去。

所以它的完整写法是这样的:connect(mapStateToProps, mapDispatchToProps, mergeProps, options)(component)

mapStateToProps(state, [ownProps]):

mapStateToProps 接受两个参数,store的state和自定义的props,并返回一个新的对象,这个对象会作为props的一部分传入ui组件。我们可以根据组件所需要的数据自定义返回一个对象。ownProps的变化也会触发mapStateToProps

function mapStateToProps(state) {
   return { todos: state.todos };
}

mapDispatchToProps(dispatch, [ownProps]):

mapDispatchToProps如果是对象,那么会和store绑定作为props的一部分传入ui组件。如果是个函数,它接受两个参数,bindActionCreators会将action和dispatch绑定并返回一个对象,这个对象会和ownProps一起作为props的一部分传入ui组件。所以不论mapDispatchToProps是对象还是函数,它最终都会返回一个对象,如果是函数,这个对象的key值是可以自定义的

function mapDispatchToProps(dispatch) {
   return {
      todoActions: bindActionCreators(todoActionCreators, dispatch),
      counterActions: bindActionCreators(counterActionCreators, dispatch)
   };
}

mapDispatchToProps返回的对象其属性其实就是一个个actionCreator,因为已经和dispatch绑定,所以当调用actionCreator时会立即发送action,而不用手动dispatch。ownProps的变化也会触发mapDispatchToProps。

mergeProps(stateProps, dispatchProps, ownProps):

将mapStateToProps() 与 mapDispatchToProps()返回的对象和组件自身的props合并成新的props并传入组件。默认返回 Object.assign({}, ownProps, stateProps, dispatchProps) 的结果。

options:

pure = true 表示Connect容器组件将在shouldComponentUpdate中对store的state和ownProps进行浅对比,判断是否发生变化,优化性能。为false则不对比。

其实connect并没有做什么,大部分的逻辑都是在它返回的wrapWithConnect函数内实现的,确切的说是在wrapWithConnect内定义的Connect组件里实现的。

###下面是一个完整的 react --> redux --> react 流程:

一、Provider组件接受redux的store作为props,然后通过context往下传。

二、connect函数在初始化的时候会将mapDispatchToProps对象绑定到store,如果mapDispatchToProps是函数则在Connect组件获得store后,根据传入的store.dispatch和action通过bindActionCreators进行绑定,再将返回的对象绑定到store,connect函数会返回一个wrapWithConnect函数,同时wrapWithConnect会被调用且传入一个ui组件,wrapWithConnect内部使用class Connect extends Component定义了一个Connect组件,传入的ui组件就是Connect的子组件,然后Connect组件会通过context获得store,并通过store.getState获得完整的state对象,将state传入mapStateToProps返回stateProps对象、mapDispatchToProps对象或mapDispatchToProps函数会返回一个dispatchProps对象,stateProps、dispatchProps以及Connect组件的props三者通过Object.assign(),或者mergeProps合并为props传入ui组件。然后在ComponentDidMount中调用store.subscribe,注册了一个回调函数handleChange监听state的变化。

三、此时ui组件就可以在props中找到actionCreator,当我们调用actionCreator时会自动调用dispatch,在dispatch中会调用getState获取整个state,同时注册一个listener监听state的变化,store将获得的state和action传给combineReducers,combineReducers会将state依据state的key值分别传给子reducer,并将action传给全部子reducer,reducer会被依次执行进行action.type的判断,如果有则返回一个新的state,如果没有则返回默认。combineReducers再次将子reducer返回的单个state进行合并成一个新的完整的state。此时state发生了变化。Connect组件中调用的subscribe会监听到state发生了变化,然后调用handleChange函数,handleChange函数内部首先调用getState获取新的state值并对新旧两个state进行浅对比,如果相同直接return,如果不同则调用mapStateToProps获取stateProps并将新旧两个stateProps进行浅对比,如果相同,直接return结束,不进行后续操作。如果不相同则调用this.setState()触发Connect组件的更新,传入ui组件,触发ui组件的更新,此时ui组件获得新的props,react --> redux --> react 的一次流程结束。

上面的有点复杂,简化版的流程是:

一、Provider组件接受redux的store作为props,然后通过context往下传。

二、connect函数收到Provider传出的store,然后接受三个参数mapStateToProps,mapDispatchToProps和组件,并将state和actionCreator以props传入组件,这时组件就可以调用actionCreator函数来触发reducer函数返回新的state,connect监听到state变化调用setState更新组件并将新的state传入组件。

connect可以写的非常简洁,mapStateToProps,mapDispatchToProps只不过是传入的回调函数,connect函数在必要的时候会调用它们,名字不是固定的,甚至可以不写名字。

简化版本:connect(state => state, action)(Component);

2 Likes
#24

赞。。。

#25

##项目搭建

上面说了react,react-router和redux的知识点。但是怎么样将它们整合起来,搭建一个完整的项目。

1、先引用 react.js,redux,react-router 等基本文件,建议用npm安装,直接在文件中引用。

2、从 react.js,redux,react-router 中引入所需要的对象和方法。

import React, {Component, PropTypes} from ‘react’;
import ReactDOM, {render} from ‘react-dom’;
import {Provider, connect} from ‘react-redux’;
import {createStore, combineReducers, applyMiddleware} from ‘redux’;
import { Router, Route, Redirect, IndexRoute, browserHistory, hashHistory } from ‘react-router’;

3、根据需求创建顶层ui组件,每个顶层ui组件对应一个页面。

4、创建actionCreators和reducers,并用combineReducers将所有的reducer合并成一个大的reduer。利用createStore创建store并引入combineReducers和applyMiddleware。

5、利用connect将actionCreator,reuder和顶层的ui组件进行关联并返回一个新的组件。

6、利用connect返回的新的组件配合react-router进行路由的部署,返回一个路由组件Router。

7、将Router放入最顶层组件Provider,引入store作为Provider的属性。

8、调用render渲染Provider组件且放入页面的标签中。

可以看到顶层的ui组件其实被套了四层组件,Provider,Router,Route,Connect,这四个并不会在视图上进行任何改变,它们只是功能性的。

通常我们在顶层的ui组件打印props时可以看到一堆属性:

上图的顶层ui组件属性总共有18个,如果刚刚接触react,可能对这些属性怎么来的感到困惑,其实这些属性来自五个地方:

组件自定义属性1个,actionCreator返回的对象6个,reducer返回的state4个,Connect组件属性0个,以及Router注入的属性7个。

2 Likes
#26

谢谢总结 :+1:

#28

总结react中遇到的坑和一些小的知识点

在使用react 中经常会遇到各种个样的问题,如果对react不熟悉则会对遇到的问题感到莫名其妙而束手无策,接下来分析一下react中容易遇到的问题和注意点。

1、setState()是异步的
this.setState()会调用render方法,但并不会立即改变state的值,state是在render方法中赋值的。所以执行this.setState()后立即获取state的值是不变的。同样的直接赋值state并不会出发更新,因为没有调用render函数。

2、组件的生命周期
componentWillMount,componentDidMount 只有在初始化的时候才调用。
componentWillReceivePorps,shouldComponentUpdate,componentWillUpdata,componentDidUpdate 只有组件在更新的时候才被调用,初始化时不调用。

3、reducer必须返回一个新的对象才能出发组件的更新
因为在connect函数中会对新旧两个state进行浅对比,如果state只是值改变但是引用地址没有改变,connect会认为它们相同而不触发更新。

4、无论reducer返回的state是否改变,subscribe中注册的所有回调函数都会被触发。

5、组件命名的首字母必须是大写,这是类命名的规范。

6、组件卸载之前,加在dom元素上的监听事件,和定时器需要手动清除,因为这些并不在react的控制范围内,必须手动清除。

7、按需加载时如果组件是通过export default 暴露出去,那么require.ensure时必须加上default。

require.ensure([], require => {
    cb(null, require('../Component/saleRecord').default)
},'saleRecord')

8、react的路由有hashHistory和browserHistory,hashHistory由hash#控制跳转,一般用于正式线上部署,browserHistory就是普通的地址跳转,一般用于开发阶段。

9、标签里用到的,for 要写成htmlFor,因为for已经成了关键字。

10、componentWillUpdate中可以直接改变state的值,而不能用setState。

11、如果使用es6class类继承react的component组件,constructor中必须调用super,因为子类需要用super继承component的this,否则实例化的时候会报错。

2 Likes
#29

思路和描述很清晰,感谢楼主分享。

6、组件卸载之前,加在dom元素上的监听事件,和定时器需要手动清除,因为这些并不在react的控制范围内,必须手动清除。

这里提到的清楚监听事件,要怎么做呢? 是直接设置 this.onClick = null 这样吗?

#30

他说的是在this.refs.xxx这种真实dom上addEventListener这样添加的监听事件,在组件卸载的时候要手动清除(removeEventListener),react组件上的onClick这种不用管,react帮我们处理好了

#31

哦,原来是这样,谢谢大神。

#32

求大神指教react啊

#33

谢谢,帮助很大 :pray:

#34

大神请留下qq,加下我498549019,谢谢

#35

请加下我的qq:498549019,有问题请教,谢谢

#36

看了点react,然后看redux,一脸懵逼啊

#37

我的qq吗

#38

新人刚刚开始react 和redux有点蒙。
这个项目之前一直只用react,现在想加入redux。之前很多小component为了重复使用都放了单独的文件。如果加上redux,是所有component都要加redux吗?还是可以混着来的?

#39

一般顶层组件都需要连接redux,还有就是组件与组件之间通信频繁的,如果一个组件自成一体或者只接受父级传过来的数据而没有交互,就没必要用redux。

#40

谢谢回复!能再问一下 我可以在action里做运算吗?类似 sorting?还是我应该在组件里运算然后只是把结果通过redux传到别的组件中去?

#41

action是一个很纯粹的对象,不要在里面做任何的运算,逻辑运算应该让reducer去做。redux最主要的作用是全局状态的数据储存与运算,在这基础上实现了组件之间的通信。有一种说法是组件所有的逻辑运算都交给redux去做,来保证组件的纯净。但是我个人习惯是对没有组件之间交互的逻辑放在组件自身,而不是托管给redux。

#42

谢谢解答!清晰了许多

#43

:yum: 客气了