通过小代码,学习redux 之二:一个重要理念
发布在通过小代码,学习react redux2015年9月16日view:2207React
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

本系列的代码见github地址上。用法,见系列的第一篇

一个重要理念:

react其中的一个理念:

A container does data fetching and then renders its corresponding sub-component. That’s it.

写React时,先写各种子组件,这些组件应该只管自己渲染就可以,不用管数据。数据是父组件通过props传入的,这些子组件感受不到redux等的存在

container会负责于数据层交互,通过子组件的props,把数据传给子组件

react-redux的作者(之一),做了进一步的说明,把组件分为dumbsmart两类

My dumb components:

  1. Have no dependencies on the rest of the app, e.g. Flux actions or stores.
  2. Often allow containment via this.props.children.
  3. Receive data and callbacks exclusively via props.
  4. Have a CSS file associated with them.
  5. Rarely have their own state.
  6. Might use other dumb components.

My smart components:

  1. Wrap one or more dumb or smart components.
  2. Hold state from Flux stores and pass it as objects to dumb components.
  3. Call Flux actions and provide these as callbacks to dumb components.
  4. Never have their own CSS styles.
  5. Rarely emit DOM of their own, use dumb components for layout.

所以,去看各种react-redux示例,一般都有两个文件夹,一个components(放dumb组件),一个containers(放smart组件).

Code时刻

src/L3里放了本次的代码。不过网上其实又更详细的说明,可以直接看这个gist,就不用看我的烂代码了。

评论
发表评论
暂无评论
PUBLISHED IN
通过小代码,学习react redux

网上教程的有个问题,就是实例代码很难运行,或者代码太多,揉进去太多知识点,一时理不清楚。所以这里用很简单的代码,去说明redux.

最终目的,写个简化版的react-redux

我的收藏