React+Redux容器实战,原来redux是这样用的!


如今我写一个简单登陆的功能作为教程,帮助更好地理解上面的流程图!

起点在React脚手架建立的index.js中开始(只展现部分重要代码,代码仅供思路参考,请勿copy)react



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



好了,再来编写action.jsspa



那么如今会想store怎么连通action的呢? 如今再去编写reducer.jscomponent



如今再将reducer添加到store树中运行起来,开始编写store.jscdn



如今整个简单的登陆功能就完成了,来梳理一下整个React运行的流程:

用户进入这个react登陆页面,未点击登陆按钮时,控制台打印出的this.props.isLogin的值为store里初始化的默认值也就是undefined。blog

当点击登陆按钮之后触发this.props.login事件,事件被传到store树后返回到mapStateToProps里再去触发action请求,而后把服务端返回数据dispatch到reducer中。教程

因为登陆功能的reducer被combineReducers组合在一块儿了,这时store树的reducer启动登陆reducer去更新store树里的initState里的数据,而后store树的数据再被传回到mapStateToProps里,这时this.props.isLogin的值也就改变成服务端返回的数据了。事件

若有错误,欢迎指点。it

相关文章
相关标签/搜索