使用Redux管理你的React应用
|
http://www.cnblogs.com/Leo_wl/p/4780750.html 因为redux和react的版本更新的比较频繁，博客园这里用的redux版本是1.0.1，如果你关心最新版本的使用技巧，欢迎来我的Github查看(https://github.com/matthew-sun/blog/issues/18) ，我会在这里进行持续的更新和纠错。
为什么使用React还需要使用别的框架来搭配？React的核心是使用组件定义界面的表现，是一个View层的前端库，那么在使用React的时候我们通常还需要一套机制去管理组件与组件之间，组件与数据模型之间的通信。 为什么使用Redux？Facebook官方提出了FLUX思想管理数据流，同时也给出了自己的实现来管理React应用。可是当我打开FLUX的文档时候，繁琐的实现，又臭又长的文档，实在难以让我有使用它的欲望。幸好，社区中和我有类似想法的不在少数，github上也涌现了一批关于实现FLUX的框架，比较出名的有Redux,Reflux,Flummox。 其中Redux的简单和有趣的编程体验是最吸引我的地方。
注：Redux开发调试工具：redux-devtools 不明真相的群众，可能这里需要我来安利一下Flux数据流的思想，看图：╔═════════╗ ╔════════╗ ╔═════════════════╗
║ Actions ║──────>║ Stores ║──────>║ View Components ║
╚═════════╝ ╚════════╝ ╚═════════════════╝
^ │
└──────────────────────────────────────┘
注意：图片仅仅是FLUX思想，而不是Facebook的实现。
大致的过程是这样的，View层不能直接对state进行操作，而需要依赖Actions派发指令来告知Store修改状态，Store接收Actions指令后发生相应的改变，View层同时跟着Store的变化而变化。 举个例子：A组件要使B组件发生变化。首先，A组件需要执行一个Action，告知绑定B组件的Store发生变化，Store接收到派发的指令后改变，那相应的B组件的视图也就发生了改变。假如C，D，E，F组件绑定了和B组件相同的Store，那么C，D，E，F也会跟着变化。 使用React和Redux开发一个小程序为了更好的描述怎么样使用Redux管理React应用，我做了一个Manage Items的小例子。你可以在这里找到全部的源代码：https://github.com/matthew-sun/redux-example。
快速查看
目录结构
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
.
+-- app
| +-- actions
| +-- index.js
| +-- components
| +-- content.js
| +-- footer.js
| +-- searchBar.js
| +-- constants
| +-- ActionTypes.js
| +-- containers
| +-- App.js
| +-- reducers
| +-- index.js
| +-- items.js
| +-- filter.js
| +-- utils
| +-- configureStore.js
| +-- index.js
+-- css
| +-- pure.min.css
+-- index.html
|
Index.js
在入口文件中，我们需要把App和redux建立起联系。Provider是react-redux提供的组件，它的作用是把store和视图绑定在了一起，这里的Store就是那个唯一的State树。当Store发生改变的时候，整个App就可以作出对应的变化。{() => }是声明了一个返回的函数传进Provider的props.children里，这个方法将会在React的 0.14版本得到简化。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
/* app/index.js */
import
React from
'react'
;
{ Provider } from
'react-redux'
;
App from
'./containers/App'
;
configureStore from
'./configureStore'
;
const store = configureStore();
React.render(
<div>
<Provider store={store}>
{() => <App /> }
</Provider>
</div>,
document.getElementById(
'app'
));
|
Constants
keyMirror这个方法非常的有用，它可以帮助我们轻松创建与键值key相等的常量。
'react/lib/keyMirror'
default
keyMirror({
null
,
DELETE_ALL:
FILTER_ITEM:
null