react不归路-module的使用

1,react中文官方文档 连接地址

2,redux

Redux 是 JavaScript 状态容器,提供可预测化的状态管理。
Redux 除了和 React 一起用外,还支持其它界面库。
它体小精悍(只有2kB)且没有任何依赖。

安装稳定版:

npm install --save redux

多数情况下,你还需要使用 React 绑定库和开发者工具。

npm install --save react-redux
npm install --save-dev redux-devtools

应用中所有的 state 都以一个对象树的形式储存在一个单一的 store 中。
惟一改变 state 的办法是触发 action,一个描述发生什么的对象。
为了描述 action 如何改变 state 树,你需要编写 reducers。

就是这样!

import { createStore } from ‘redux’;

  • 这是一个 reducer,形式为 (state, action) => state 的纯函数。
  • 描述了 action 如何把 state 转变成下一个 state。
  • state 的形式取决于你,可以是基本类型、数组、对象、
  • 甚至是 Immutable.js 生成的数据结构。惟一的要点是
  • 当 state 变化时需要返回全新的对象,而不是修改传入的参数。
  • 下面例子使用 switch 语句和字符串来做判断,但你可以写帮助类(helper)
  • 根据不同的约定(如方法映射)来判断,只要适用你的项目即可。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
function counter(state = 0, action) {
switch (action.type) {
case 'INCREMENT':
return state + 1;
case 'DECREMENT':
return state - 1;
default:
return state;
}
}

// 创建 Redux store 来存放应用的状态。
// API 是 { subscribe, dispatch, getState }。
let store = createStore(counter);

// 可以手动订阅更新,也可以事件绑定到视图层。
store.subscribe(() =>
console.log(store.getState())
);

// 改变内部 state 惟一方法是 dispatch 一个 action。
// action 可以被序列化,用日记记录和储存下来,后期还可以以回放的方式执行
store.dispatch({ type: 'INCREMENT' });
// 1
store.dispatch({ type: 'INCREMENT' });
// 2
store.dispatch({ type: 'DECREMENT' });

3.redux-thunk
理解redux和redux的中间件redux-thunk的认识