redux
redux的三个概念: action reducer store
- action: 一个包含type的object, 通常把一个返回action对象的函数称为action函数, 直接简称为action
1 |
|
- reducer: 一个根据action type来更新数据的函数
1 | function reducer(state = { data: 1 }, action) { |
- store: 使用createStore从reducer函数创建的数据对象, 包含getState和dispatch方法
1 | import { createStore } from 'redux'; |
注意! 更新数据需要dispatch对应的action
react-redux
用于将redux于react结合
- Provider: 顶层组件, 注入store对象
1 | import { Provider } from 'react-redux'; |
- connect: 工具函数, 参数一为函数, 该函数接收state, 返回一个对象, 对象包含一系列数据. 参数二为函数, 该函数接收dispatch, 返回一个对象, 对象包含一系列方法
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
27import { connect } from 'react-redux';
class App extends Component {
componentDidMount() {
this.props.dispatch({
type: 'action1',
data: 1,
});
}
render() {
// this.props.func1();
// this.props.func2();
return (
<div>
</div >
);
}
}
export default connect(
state => ({
data: state.data,
obj: state.obj,
}),
dispatch => ({ dispatch }),
)(App);
immutable.js
特殊的object(MAP)/array(LIST)
- 更新数据: set setIn update updateIn
- 读取数据: get getIn
- 可以直接比较(深层比较)
- 创建(fromJS), 还原(toJS)
1 | 上述的reducer可以用下面的代码优化 |
优点
- 无需深复制, 更新数据自动返回一个新对象
- 适合与react shouldComponentUpdate结合来优化性能
pure-render-decorator
自动创建shouldComponentUpdate的工具, 需要配置babel decorator特性才能使用