viviier

react-redux相关.md

react-redux 做的事情是,将react与redux连接起来,让我们的子组件可以去接收store,以及很方便的去把组件变成容器组件。使用它的好处是我们不需要自己手动进行 subscribe,也不需要手动进行过多的性能优化。

Provier

Provider的核心是使用了React的context,将我们传进去的store接收后分发给每一个子组件,整个react组件树就可以通过this.context.store共享一个store,从而摆脱繁琐的props子组件间的通讯。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// simple-provider
class Provider extends Component {
getChildContext() {
return {
store: this.store
}
}
constructor(props, context) {
super(props, context);
this.store = props.store;
}
render() {
return Children.only(this.props.children);
}
}
Provider.childrenContextTypes = {
store: PropTypes.Object
};

connect

connect则是将一个组件通过hoc的方式把用户定义的mapStateToprops与mapDispatchToProps封装到用户传入的组件里。

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
28
29
30
31
32
33
34
35
36
37
38
// simple-connect
function createConnect(mapStateToProps, mapDispatchToProps, mergeProps) {
return function createWrapper(HOCComponent) {
class Connect extends Component {
constructor(props, context) {
super(props, context);
this.store = context.store;
}
componentDidMount() {
this.unsubscribe = this.store.subscribe(this.handleChange.bind(this));
}
componentUnMount() {
this.unsubscribe();
}
handleChange() {
this.forceUpdate();
}
render() {
return (
<HOCComponent
{...this.props}
{...mapStateToProps(this.store.getState(), this.props)}
{...mapDispatchToProps(this.store.dispatch, this.props)}
/>
);
}
}
Connect.contextTypes = {
store: PropTypes.Object
};
}
}

相关链接


------本文结束感谢阅读------