图解 redux 和 react 的关系
2017-08-29 19:06
666 查看
最近研究了下redux项目里的example里面的目录结构,发现里面文件夹比较多,概念也比较多,所以画图整理一下;
以examples中的real-world为例,文件结构长这个样子:
先简单看一下redux和react的数据流:
redux
react
在react中使用redux是用Store将state替换掉,变成下面的情况;
这个变换过程要做的事情是:
将onChage替换为dispatch(Action);
将store中的状态引入到Component中用于render;
就是上图中Component的出口和入口两个点,着两个点对接好,数据流就接通了。
看看examples里是怎么做的,它的目录结构里包含了6个文件夹
components存储Component的代码
actions存储Actions的代码
middleware存储redux中间件的代码
reducers存储Reducer的代码
store存储初始化Store的代码
containers最关键,将Component的事件、状态分别连接到Action和Store;
比如containers/UserPage.js的代码:
最后这个connect的函数的两个参数分别将
Store中的状态映射到component.props中;
2. 将Action映射到component的事件中;
转载:https://www.oschina.net/news/72579/redux-react
以examples中的real-world为例,文件结构长这个样子:
先简单看一下redux和react的数据流:
redux
react
在react中使用redux是用Store将state替换掉,变成下面的情况;
这个变换过程要做的事情是:
将onChage替换为dispatch(Action);
将store中的状态引入到Component中用于render;
就是上图中Component的出口和入口两个点,着两个点对接好,数据流就接通了。
看看examples里是怎么做的,它的目录结构里包含了6个文件夹
components,
actions,
middleware,
reducers,
store,
containers:分别对应上图的五块再加上数据连接:
components存储Component的代码
actions存储Actions的代码
middleware存储redux中间件的代码
reducers存储Reducer的代码
store存储初始化Store的代码
containers最关键,将Component的事件、状态分别连接到Action和Store;
比如containers/UserPage.js的代码:
最后这个connect的函数的两个参数分别将
Store中的状态映射到component.props中;
2. 将Action映射到component的事件中;
转载:https://www.oschina.net/news/72579/redux-react
相关文章推荐
- 图解 redux 和 react 的关系
- 理顺react,flux,redux这些概念的关系
- 详解react、redux、react-redux之间的关系
- 图解表的连接关系
- SQL和T-SQL关系图解
- react+redux实战
- react项目学习笔记四(redux和redux的中间件redux-thunk的认识)
- 图解操作系统中进程和线程关系
- react-redux的connect()方法
- react+redux教程(一)connect、applyMiddleware、thunk、webpackHotMiddleware
- react-redux-router 一个完整项目解读(附源码)
- react-native添加redux支持
- 混合开发的大趋势之一React Native Height and Width (尺寸),Flexbox(位置关系)
- 在react-native中使用redux
- 面向React/Redux的可维护项目结构之旅【翻】
- react + redux 实现幻灯片
- 用react-native typescript redux 构建项目
- linux内核中断-数据结构-关系图解
- rn+redux+immutable+saga+react-navigation技术栈
- React+Redux+Webpack构建开发单页应用环境