this.appState

appState allows all AppComponents (including the RootAppComponent) to share state. It works similarly to this.state, but is shared across all AppComponents.

Initializing appState

appState is initialized by the RootAppComponent's constructor. By default it is initialized to {}, but you should initialize it to a more reasonable default in your RootAppComponent class:

class App extends RootAppComponent {
  appState = { myToDos: [] };

  // or:
  constructor(props) {
    super(props);
    this.appState = { myToDos: [] };
  }
}

Using appState

Amorphous provides this.appState in all AppComponents (including your RootAppComponent).

NOTE: this.appState is not accessible in the constructor of AppComponents, or in any static methods.

This means that in render() or other methods, you can access this.appState to read your app's current state, and display something based on that:

class MyToDoList extends AppComponent {
  render() {
    return (
      <div>
        {this.appState.myToDos.map((todoItem) => (
          <MyToDo item={todoItem} />
        ))}
      </div>
    );
  }
}

Updating appState

AppState can be updated from any AppComponent or RootAppComponent using this.setAppState().

class MyToDoList extends AppComponent {
  render() {
    return (
      <div>
        {this.appState.myToDos.map((todoItem) => (
          <MyToDo item={todoItem} />
        ))}
        <input
          type="button"
          value="Add To-Do"
          onClick={() => this.setAppState({
            myToDos: this.appState.myToDos.concat({
              text: '',
              completed: false,
            }),
          })}
        />
      </div>
    );
  }
}

Read more about setAppState

Comparing previous/next appState in lifecycle methods

Amorphous provides an additional appState parameter to shouldComponentUpdate and componentDidUpdate for AppComponents and RootAppComponents. This allows components to compare this.appState to previous/next versions of appState.

See shouldComponentUpdate and componentDidUpdate for more information.