Remove initialState in favor of the default React way of setting initial state

Author: philipp-spiess

README.md

@@ -53,7 +53,7 @@ npm install react-recomponent --save
 
 To create a reducer component extend `ReComponent` from `react-recomponent` instead of `React.Component`.
 
-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:
+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:
 
 ```js
 import React from "react";
@@ -63,12 +63,7 @@ class Counter extends ReComponent {
   constructor() {
     super();
     this.handleClick = this.createSender("CLICK");
-  }
-
-  initialState(props) {
-    return {
-      count: 0
-    };
+    this.state = { count: 0 };
   }
 
   reducer(action, state) {
@@ -132,12 +127,7 @@ class Counter extends ReComponent {
     this.handleUpdateWithSideEffects = this.createSender(
       "UPDATE_WITH_SIDE_EFFECTS"
     );
-  }
-
-  initialState(props) {
-    return {
-      count: 0
-    };
+    this.state = { count: 0 };
   }
 
   reducer(action, state) {
@@ -188,10 +178,7 @@ class Counter extends ReComponent {
   constructor() {
     super();
     this.handleClick = this.handleClick.bind(this);
-  }
-
-  initialState(props) {
-    return { x: 0, y: 0 };
+    this.state = { x: 0, y: 0 };
   }
 
   handleClick(event) {
@@ -269,12 +256,7 @@ class Container extends ReComponent {
   constructor() {
     super();
     this.handleClick = this.createSender("CLICK");
-  }
-
-  initialState(props) {
-    return {
-      count: 0
-    };
+    this.state = { count: 0 };
   }
 
   reducer(action, state) {
@@ -313,12 +295,7 @@ type State = { count: number };
 
 class UntypedActionTypes extends ReComponent<Props, State> {
   handleClick = this.createSender("CLICK");
-
-  initialState(props) {
-    return {
-      count: 0
-    };
-  }
+  state = { count: 0 };
 
   reducer(action, state) {
     switch (action.type) {
@@ -351,12 +328,7 @@ type ActionTypes = "CLICK";
 
 class TypedActionTypes extends ReComponent<Props, State, ActionTypes> {
   handleClick = this.createSender("CLICK");
-
-  initialState(props) {
-    return {
-      count: 0
-    };
-  }
+  state = { count: 0 };
 
   reducer(action, state) {
     switch (action.type) {
@@ -390,10 +362,6 @@ Check out the [type definition tests](https://github.com/philipp-spiess/react-re
 
 - `ReComponent`
 
-  - `initialState(props): state`
-
-    Initialize the state of the component based on its props.
-
   - `reducer(action, state): effect`
 
     Translates an action into an effect. This is the main place to update your component‘s state.

__tests__/Context-test.js

@@ -45,12 +45,7 @@ describe("ReComponent", () => {
     constructor() {
       super();
       this.handleClick = this.createSender("CLICK");
-    }
-
-    initialState(props) {
-      return {
-        count: 0
-      };
+      this.state = { count: 0 };
     }
 
     reducer(action, state) {

__tests__/ReComponent-test.js

@@ -19,85 +19,38 @@ describe("ReComponent", () => {
     document.body.appendChild(container);
   });
 
-  describe("with plain JS objects", () => {
-    class Example extends ReComponent {
-      constructor() {
-        super();
-        this.handleClick = this.createSender("CLICK");
-      }
-
-      initialState(props) {
-        return {
-          count: 0
-        };
-      }
-
-      reducer(action, state) {
-        switch (action.type) {
-          case "CLICK":
-            return Update({ count: state.count + 1 });
-        }
-      }
-
-      render() {
-        return (
-          <button onClick={this.handleClick}>
-            You’ve clicked this {this.state.count} times(s)
-          </button>
-        );
-      }
+  class Example extends ReComponent {
+    constructor() {
+      super();
+      this.handleClick = this.createSender("CLICK");
+      this.state = { count: 0 };
     }
 
-    it("renders the initial state", () => {
-      const instance = ReactDOM.render(<Example />, container);
-      expect(container.textContent).toEqual("You’ve clicked this 0 times(s)");
-    });
-
-    it("increases the counter when clicked", () => {
-      const instance = ReactDOM.render(<Example />, container);
-      click(container.firstChild);
-      expect(container.textContent).toEqual("You’ve clicked this 1 times(s)");
-    });
-  });
-
-  describe("with Immutable.JS records", () => {
-    const State = Record({ count: 0 });
-    class Example extends ReComponent {
-      constructor() {
-        super();
-        this.handleClick = this.createSender("CLICK");
-      }
-
-      initialState(props) {
-        return State();
-      }
-
-      reducer(action, state) {
-        switch (action.type) {
-          case "CLICK":
-            return Update(state.update("count", count => count + 1));
-        }
+    reducer(action, state) {
+      switch (action.type) {
+        case "CLICK":
+          return Update({ count: state.count + 1 });
       }
+    }
 
-      render() {
-        return (
-          <button onClick={this.handleClick}>
-            You’ve clicked this {this.immutableState.count} times(s)
-          </button>
-        );
-      }
+    render() {
+      return (
+        <button onClick={this.handleClick}>
+          You’ve clicked this {this.state.count} times(s)
+        </button>
+      );
     }
+  }
 
-    it("renders the initial state", () => {
-      const instance = ReactDOM.render(<Example />, container);
-      expect(container.textContent).toEqual("You’ve clicked this 0 times(s)");
-    });
+  it("renders the initial state", () => {
+    const instance = ReactDOM.render(<Example />, container);
+    expect(container.textContent).toEqual("You’ve clicked this 0 times(s)");
+  });
 
-    it("increases the counter when clicked", () => {
-      const instance = ReactDOM.render(<Example />, container);
-      click(container.firstChild);
-      expect(container.textContent).toEqual("You’ve clicked this 1 times(s)");
-    });
+  it("increases the counter when clicked", () => {
+    const instance = ReactDOM.render(<Example />, container);
+    click(container.firstChild);
+    expect(container.textContent).toEqual("You’ve clicked this 1 times(s)");
   });
 
   it("errors when no `reducer` method is defined", () => {

__tests__/ReComponentImmutable-test.js

@@ -0,0 +1,59 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import { Record } from "immutable";
+
+import {
+  ReComponent,
+  NoUpdate,
+  Update,
+  SideEffects,
+  UpdateWithSideEffects
+} from "../src";
+
+import { click, withConsoleMock } from "./helpers";
+
+describe("ReComponentImmutable", () => {
+  let container;
+  beforeEach(() => {
+    container = document.createElement("div");
+    document.body.appendChild(container);
+  });
+
+  const State = Record({ count: 0 });
+  class Example extends ReComponent {
+    constructor() {
+      super();
+      this.handleClick = this.createSender("CLICK");
+    }
+
+    initialImmutableState(props) {
+      return State();
+    }
+
+    reducer(action, state) {
+      switch (action.type) {
+        case "CLICK":
+          return Update(state.update("count", count => count + 1));
+      }
+    }
+
+    render() {
+      return (
+        <button onClick={this.handleClick}>
+          You’ve clicked this {this.immutableState.count} times(s)
+        </button>
+      );
+    }
+  }
+
+  it("renders the initial state", () => {
+    const instance = ReactDOM.render(<Example />, container);
+    expect(container.textContent).toEqual("You’ve clicked this 0 times(s)");
+  });
+
+  it("increases the counter when clicked", () => {
+    const instance = ReactDOM.render(<Example />, container);
+    click(container.firstChild);
+    expect(container.textContent).toEqual("You’ve clicked this 1 times(s)");
+  });
+});

__tests__/RePureComponent-test.js

@@ -22,12 +22,7 @@ describe("RePureComponent", () => {
     constructor() {
       super();
       this.handleClick = this.createSender("CLICK");
-    }
-
-    initialState(props) {
-      return {
-        count: 0
-      };
+      this.state = { count: 0 };
     }
 
     reducer(action, state) {

__tests__/UpdateTypes-test.js

@@ -35,12 +35,7 @@ describe("UpdateTypes", () => {
       updateWithSideEffects = this.createSender("UPDATE_WITH_SIDE_EFFECTS");
       invalid = this.createSender("INVALID");
       unhandled = this.createSender("UNHANDLED");
-    }
-
-    initialState(props) {
-      return {
-        count: 0
-      };
+      this.state = { count: 0 };
     }
 
     reducer(action, state) {