Skip to content

Commit 0236630

Browse files
philipp-spiessphilipp-spiess
committed
Remove initialState in favor of the default React way of setting initial state
1 parent f9bb84c commit 0236630

File tree

9 files changed

+127
-197
lines changed

9 files changed

+127
-197
lines changed

‎README.md‎

Lines changed: 7 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ npm install react-recomponent --save
5353

5454
To create a reducer component extend `ReComponent` from `react-recomponent` instead of `React.Component`.
5555

56-
With `ReComponent` state is usually initialized using the `initialState()` callback and can only be modified by sending actions to the `reducer()` function. To help with that, you can use `createSender()`. Take a look at a simple counter example:
56+
With `ReComponent` state can only be modified by sending actions to the `reducer()` function. To help with that, you can use `createSender()`. Take a look at a simple counter example:
5757

5858
```js
5959
import React from "react";
@@ -63,12 +63,7 @@ class Counter extends ReComponent {
6363
constructor() {
6464
super();
6565
this.handleClick = this.createSender("CLICK");
66-
}
67-
68-
initialState(props) {
69-
return {
70-
count: 0
71-
};
66+
this.state = { count: 0 };
7267
}
7368

7469
reducer(action, state) {
@@ -132,12 +127,7 @@ class Counter extends ReComponent {
132127
this.handleUpdateWithSideEffects = this.createSender(
133128
"UPDATE_WITH_SIDE_EFFECTS"
134129
);
135-
}
136-
137-
initialState(props) {
138-
return {
139-
count: 0
140-
};
130+
this.state = { count: 0 };
141131
}
142132

143133
reducer(action, state) {
@@ -188,10 +178,7 @@ class Counter extends ReComponent {
188178
constructor() {
189179
super();
190180
this.handleClick = this.handleClick.bind(this);
191-
}
192-
193-
initialState(props) {
194-
return { x: 0, y: 0 };
181+
this.state = { x: 0, y: 0 };
195182
}
196183

197184
handleClick(event) {
@@ -269,12 +256,7 @@ class Container extends ReComponent {
269256
constructor() {
270257
super();
271258
this.handleClick = this.createSender("CLICK");
272-
}
273-
274-
initialState(props) {
275-
return {
276-
count: 0
277-
};
259+
this.state = { count: 0 };
278260
}
279261

280262
reducer(action, state) {
@@ -313,12 +295,7 @@ type State = { count: number };
313295

314296
class UntypedActionTypes extends ReComponent<Props, State> {
315297
handleClick = this.createSender("CLICK");
316-
317-
initialState(props) {
318-
return {
319-
count: 0
320-
};
321-
}
298+
state = { count: 0 };
322299

323300
reducer(action, state) {
324301
switch (action.type) {
@@ -351,12 +328,7 @@ type ActionTypes = "CLICK";
351328

352329
class TypedActionTypes extends ReComponent<Props, State, ActionTypes> {
353330
handleClick = this.createSender("CLICK");
354-
355-
initialState(props) {
356-
return {
357-
count: 0
358-
};
359-
}
331+
state = { count: 0 };
360332

361333
reducer(action, state) {
362334
switch (action.type) {
@@ -390,10 +362,6 @@ Check out the [type definition tests](https://github.com/philipp-spiess/react-re
390362

391363
- `ReComponent`
392364

393-
- `initialState(props): state`
394-
395-
Initialize the state of the component based on its props.
396-
397365
- `reducer(action, state): effect`
398366

399367
Translates an action into an effect. This is the main place to update your component‘s state.

‎__tests__/Context-test.js‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -45,12 +45,7 @@ describe("ReComponent", () => {
4545
constructor() {
4646
super();
4747
this.handleClick = this.createSender("CLICK");
48-
}
49-
50-
initialState(props) {
51-
return {
52-
count: 0
53-
};
48+
this.state = { count: 0 };
5449
}
5550

5651
reducer(action, state) {

‎__tests__/ReComponent-test.js‎

Lines changed: 25 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -19,85 +19,38 @@ describe("ReComponent", () => {
1919
document.body.appendChild(container);
2020
});
2121

22-
describe("with plain JS objects", () => {
23-
class Example extends ReComponent {
24-
constructor() {
25-
super();
26-
this.handleClick = this.createSender("CLICK");
27-
}
28-
29-
initialState(props) {
30-
return {
31-
count: 0
32-
};
33-
}
34-
35-
reducer(action, state) {
36-
switch (action.type) {
37-
case "CLICK":
38-
return Update({ count: state.count + 1 });
39-
}
40-
}
41-
42-
render() {
43-
return (
44-
<button onClick={this.handleClick}>
45-
You’ve clicked this {this.state.count} times(s)
46-
</button>
47-
);
48-
}
22+
class Example extends ReComponent {
23+
constructor() {
24+
super();
25+
this.handleClick = this.createSender("CLICK");
26+
this.state = { count: 0 };
4927
}
5028

51-
it("renders the initial state", () => {
52-
const instance = ReactDOM.render(<Example />, container);
53-
expect(container.textContent).toEqual("You’ve clicked this 0 times(s)");
54-
});
55-
56-
it("increases the counter when clicked", () => {
57-
const instance = ReactDOM.render(<Example />, container);
58-
click(container.firstChild);
59-
expect(container.textContent).toEqual("You’ve clicked this 1 times(s)");
60-
});
61-
});
62-
63-
describe("with Immutable.JS records", () => {
64-
const State = Record({ count: 0 });
65-
class Example extends ReComponent {
66-
constructor() {
67-
super();
68-
this.handleClick = this.createSender("CLICK");
69-
}
70-
71-
initialState(props) {
72-
return State();
73-
}
74-
75-
reducer(action, state) {
76-
switch (action.type) {
77-
case "CLICK":
78-
return Update(state.update("count", count => count + 1));
79-
}
29+
reducer(action, state) {
30+
switch (action.type) {
31+
case "CLICK":
32+
return Update({ count: state.count + 1 });
8033
}
34+
}
8135

82-
render() {
83-
return (
84-
<button onClick={this.handleClick}>
85-
You’ve clicked this {this.immutableState.count} times(s)
86-
</button>
87-
);
88-
}
36+
render() {
37+
return (
38+
<button onClick={this.handleClick}>
39+
You’ve clicked this {this.state.count} times(s)
40+
</button>
41+
);
8942
}
43+
}
9044

91-
it("renders the initial state", () => {
92-
const instance = ReactDOM.render(<Example />, container);
93-
expect(container.textContent).toEqual("You’ve clicked this 0 times(s)");
94-
});
45+
it("renders the initial state", () => {
46+
const instance = ReactDOM.render(<Example />, container);
47+
expect(container.textContent).toEqual("You’ve clicked this 0 times(s)");
48+
});
9549

96-
it("increases the counter when clicked", () => {
97-
const instance = ReactDOM.render(<Example />, container);
98-
click(container.firstChild);
99-
expect(container.textContent).toEqual("You’ve clicked this 1 times(s)");
100-
});
50+
it("increases the counter when clicked", () => {
51+
const instance = ReactDOM.render(<Example />, container);
52+
click(container.firstChild);
53+
expect(container.textContent).toEqual("You’ve clicked this 1 times(s)");
10154
});
10255

10356
it("errors when no `reducer` method is defined", () => {

‎__tests__/ReComponentImmutable-test.js‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import React from "react";
2+
import ReactDOM from "react-dom";
3+
import { Record } from "immutable";
4+
5+
import {
6+
ReComponent,
7+
NoUpdate,
8+
Update,
9+
SideEffects,
10+
UpdateWithSideEffects
11+
} from "../src";
12+
13+
import { click, withConsoleMock } from "./helpers";
14+
15+
describe("ReComponentImmutable", () => {
16+
let container;
17+
beforeEach(() => {
18+
container = document.createElement("div");
19+
document.body.appendChild(container);
20+
});
21+
22+
const State = Record({ count: 0 });
23+
class Example extends ReComponent {
24+
constructor() {
25+
super();
26+
this.handleClick = this.createSender("CLICK");
27+
}
28+
29+
initialImmutableState(props) {
30+
return State();
31+
}
32+
33+
reducer(action, state) {
34+
switch (action.type) {
35+
case "CLICK":
36+
return Update(state.update("count", count => count + 1));
37+
}
38+
}
39+
40+
render() {
41+
return (
42+
<button onClick={this.handleClick}>
43+
You’ve clicked this {this.immutableState.count} times(s)
44+
</button>
45+
);
46+
}
47+
}
48+
49+
it("renders the initial state", () => {
50+
const instance = ReactDOM.render(<Example />, container);
51+
expect(container.textContent).toEqual("You’ve clicked this 0 times(s)");
52+
});
53+
54+
it("increases the counter when clicked", () => {
55+
const instance = ReactDOM.render(<Example />, container);
56+
click(container.firstChild);
57+
expect(container.textContent).toEqual("You’ve clicked this 1 times(s)");
58+
});
59+
});

‎__tests__/RePureComponent-test.js‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -22,12 +22,7 @@ describe("RePureComponent", () => {
2222
constructor() {
2323
super();
2424
this.handleClick = this.createSender("CLICK");
25-
}
26-
27-
initialState(props) {
28-
return {
29-
count: 0
30-
};
25+
this.state = { count: 0 };
3126
}
3227

3328
reducer(action, state) {

‎__tests__/UpdateTypes-test.js‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -35,12 +35,7 @@ describe("UpdateTypes", () => {
3535
updateWithSideEffects = this.createSender("UPDATE_WITH_SIDE_EFFECTS");
3636
invalid = this.createSender("INVALID");
3737
unhandled = this.createSender("UNHANDLED");
38-
}
39-
40-
initialState(props) {
41-
return {
42-
count: 0
43-
};
38+
this.state = { count: 0 };
4439
}
4540

4641
reducer(action, state) {

‎src/isImmutable.js‎

Lines changed: 0 additions & 23 deletions
This file was deleted.

0 commit comments

Comments
 (0)