Skip to content

Commit 6178a0a

Browse files
gaearongaearon
committed
Use function instead of arrow for clarity
1 parent 58fa107 commit 6178a0a

File tree

1 file changed

+98
-94
lines changed

1 file changed

+98
-94
lines changed

‎src/components/createConnect.js‎

Lines changed: 98 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -66,132 +66,136 @@ export default function createConnect(React) {
6666
return mergedProps;
6767
}
6868

69-
return DecoratedComponent => class Connect extends Component {
70-
static displayName = `Connect(${getDisplayName(DecoratedComponent)})`;
71-
static DecoratedComponent = DecoratedComponent;
69+
return function wrapWithConnect(DecoratedComponent) {
70+
class Connect extends Component {
71+
static displayName = `Connect(${getDisplayName(DecoratedComponent)})`;
72+
static DecoratedComponent = DecoratedComponent;
7273

73-
static contextTypes = {
74-
store: storeShape.isRequired
75-
};
74+
static contextTypes = {
75+
store: storeShape.isRequired
76+
};
7677

77-
shouldComponentUpdate(nextProps, nextState) {
78-
return !shallowEqual(this.state, nextState);
79-
}
78+
shouldComponentUpdate(nextProps, nextState) {
79+
return !shallowEqual(this.state, nextState);
80+
}
8081

81-
constructor(props, context) {
82-
super(props, context);
83-
this.version = version;
84-
this.setUnderlyingRef = ::this.setUnderlyingRef;
82+
constructor(props, context) {
83+
super(props, context);
84+
this.version = version;
85+
this.setUnderlyingRef = ::this.setUnderlyingRef;
8586

86-
this.stateProps = computeStateProps(context);
87-
this.dispatchProps = computeDispatchProps(context);
88-
this.state = this.computeNextState();
89-
}
87+
this.stateProps = computeStateProps(context);
88+
this.dispatchProps = computeDispatchProps(context);
89+
this.state = this.computeNextState();
90+
}
9091

91-
recomputeStateProps() {
92-
const nextStateProps = computeStateProps(this.context);
93-
if (shallowEqual(nextStateProps, this.stateProps)) {
94-
return false;
92+
recomputeStateProps() {
93+
const nextStateProps = computeStateProps(this.context);
94+
if (shallowEqual(nextStateProps, this.stateProps)) {
95+
return false;
96+
}
97+
98+
this.stateProps = nextStateProps;
99+
return true;
95100
}
96101

97-
this.stateProps = nextStateProps;
98-
return true;
99-
}
102+
recomputeDispatchProps() {
103+
const nextDispatchProps = computeDispatchProps(this.context);
104+
if (shallowEqual(nextDispatchProps, this.dispatchProps)) {
105+
return false;
106+
}
100107

101-
recomputeDispatchProps() {
102-
const nextDispatchProps = computeDispatchProps(this.context);
103-
if (shallowEqual(nextDispatchProps, this.dispatchProps)) {
104-
return false;
108+
this.dispatchProps = nextDispatchProps;
109+
return true;
105110
}
106111

107-
this.dispatchProps = nextDispatchProps;
108-
return true;
109-
}
112+
computeNextState(props = this.props) {
113+
return computeNextState(
114+
this.stateProps,
115+
this.dispatchProps,
116+
props
117+
);
118+
}
110119

111-
computeNextState(props = this.props) {
112-
return computeNextState(
113-
this.stateProps,
114-
this.dispatchProps,
115-
props
116-
);
117-
}
120+
recomputeState(props = this.props) {
121+
const nextState = this.computeNextState(props);
122+
if (!shallowEqual(nextState, this.state)) {
123+
this.setState(nextState);
124+
}
125+
}
118126

119-
recomputeState(props = this.props) {
120-
const nextState = this.computeNextState(props);
121-
if (!shallowEqual(nextState, this.state)) {
122-
this.setState(nextState);
127+
isSubscribed() {
128+
return typeof this.unsubscribe === 'function';
123129
}
124-
}
125130

126-
isSubscribed() {
127-
return typeof this.unsubscribe === 'function';
128-
}
131+
trySubscribe() {
132+
if (shouldSubscribe && !this.unsubscribe) {
133+
this.unsubscribe = this.context.store.subscribe(::this.handleChange);
134+
this.handleChange();
135+
}
136+
}
129137

130-
trySubscribe() {
131-
if (shouldSubscribe && !this.unsubscribe) {
132-
this.unsubscribe = this.context.store.subscribe(::this.handleChange);
133-
this.handleChange();
138+
tryUnsubscribe() {
139+
if (this.unsubscribe) {
140+
this.unsubscribe();
141+
this.unsubscribe = null;
142+
}
134143
}
135-
}
136144

137-
tryUnsubscribe() {
138-
if (this.unsubscribe) {
139-
this.unsubscribe();
140-
this.unsubscribe = null;
145+
componentDidMount() {
146+
this.trySubscribe();
141147
}
142-
}
143148

144-
componentDidMount() {
145-
this.trySubscribe();
146-
}
149+
componentWillUpdate() {
150+
if (process.env.NODE_ENV !== 'production') {
151+
if (this.version === version) {
152+
return;
153+
}
147154

148-
componentWillUpdate() {
149-
if (process.env.NODE_ENV !== 'production') {
150-
if (this.version === version) {
151-
return;
152-
}
155+
// We are hot reloading!
156+
this.version = version;
153157

154-
// We are hot reloading!
155-
this.version = version;
158+
// Update the state and bindings.
159+
this.trySubscribe();
160+
this.recomputeStateProps();
161+
this.recomputeDispatchProps();
162+
this.recomputeState();
163+
}
164+
}
156165

157-
// Update the state and bindings.
158-
this.trySubscribe();
159-
this.recomputeStateProps();
160-
this.recomputeDispatchProps();
161-
this.recomputeState();
166+
componentWillReceiveProps(nextProps) {
167+
if (!shallowEqual(nextProps, this.props)) {
168+
this.recomputeState(nextProps);
169+
}
162170
}
163-
}
164171

165-
componentWillReceiveProps(nextProps) {
166-
if (!shallowEqual(nextProps, this.props)) {
167-
this.recomputeState(nextProps);
172+
componentWillUnmount() {
173+
this.tryUnsubscribe();
168174
}
169-
}
170175

171-
componentWillUnmount() {
172-
this.tryUnsubscribe();
173-
}
176+
handleChange() {
177+
if (this.recomputeStateProps()) {
178+
this.recomputeState();
179+
}
180+
}
174181

175-
handleChange() {
176-
if (this.recomputeStateProps()) {
177-
this.recomputeState();
182+
getUnderlyingRef() {
183+
return this.underlyingRef;
178184
}
179-
}
180185

181-
getUnderlyingRef() {
182-
return this.underlyingRef;
183-
}
186+
setUnderlyingRef(instance) {
187+
this.underlyingRef = instance;
188+
}
184189

185-
setUnderlyingRef(instance) {
186-
this.underlyingRef = instance;
190+
render() {
191+
return (
192+
<DecoratedComponent ref={this.setUnderlyingRef}
193+
{...this.state} />
194+
);
195+
}
187196
}
188197

189-
render() {
190-
return (
191-
<DecoratedComponent ref={this.setUnderlyingRef}
192-
{...this.state} />
193-
);
194-
}
198+
return Connect;
195199
};
196200
};
197201
}

0 commit comments

Comments
 (0)