
现在我写一个简单登录的功能做为教程,帮助更好地理解上面的流程图!
起点在React脚手架创建的index.js中开始(只展示部分重要代码,代码仅供思路参考,请勿copy)

再看看App.js,这里的App组件就是流程图里的component模块

好了,再来编写action.js

那么现在会想store怎么连通action的呢? 现在再去编写reducer.js

现在再将reducer添加到store树中运行起来,开始编写store.js

现在整个简单的登录功能就完成了,来梳理一下整个React运行的流程:
用户进入这个react登录页面,未点击登录按钮时,控制台打印出的this.props.isLogin的值为store里初始化的默认值也就是undefined。
当点击登录按钮以后触发this.props.login事件,事件被传到store树后返回到mapStateToProps里再去触发action请求,然后把服务端返回数据dispatch到reducer中。
由于登录功能的reducer被combineReducers组合在一起了,这时store树的reducer启动登录reducer去更新store树里的initState里的数据,然后store树的数据再被传回到mapStateToProps里,这时this.props.isLogin的值也就改变成服务端返回的数据了。
如有错误,欢迎指点。