Hi 👋

Overmind

State Management library 👷‍

Manage everything but the view 🧠

Supports React, Vue & Angular ✨

By the team behind CerebralJS 🚀

Made with TS, for TS 🚀

✋ I'm Etienne

👨‍🎓 Master degree at Gobelins

⚛ React trainer & dev & consultant @LeReacteurIO

🖥 Freelance

Mental model

" A mental model is a representation of the surrounding world, the relationships between its various parts and a person's intuitive perception about his or her own acts and their consequences. "

Wikipedia

In Programming

In programming, mental model is about understanding what your program does and how you have to change it to acheive what you want.

Libraries help us shape
the mental model of our apps

React ↦ Components

Redux ↦ Action, Reducer

Naming is important

Presentational ⇔ Container Components

render ⇔ handleInputChange

Overmind Mental model

State

Derive

Effects

Action

State

One unique state tree (like Redux)

Define what your app look like

When you update the state, the view get updated too

Derive

(state: State) => DerivedValue

When you update the state, drived get updated too

In the view, derived are used like state

In fact derived are in the state

Effects

Anything related to side effects

Like fetching data, writting local storage, generating a new id

Overmind does nothing with them...

...except tracking, so they appear in the devtool

Action

Do stuff

Like changing the state and using effects

async (ctx: Context) => any

Context

...Effects

state

value

myAction(value)

Mutation

Just mutate the state

state.isLoading = true

Uses Proxy under the hood to track changes

Can't mutate outside of an action

const myAction = async ({
  api,
  state,
  value: query
}) => {
  state.isLoading = true;
  const result = await api.getResult(query);
  state.result = result;
  state.isLoading = false;
};

// the the view
myAction("this-is-the-query");

Pipe Action

Pipe Action

Operations

Pipe Action

op-op-spec

function operator (err, value, next, final = next) {}

Pipe Action

Operators

Mutate

Run

Map

Filter

When

Debounce

...

Pipe Action

Operators

const mutate = (
  doMutation: (context: Context) => void
): Operator => {
  // ...
}

Pipe Action

Operators

const setIsLoading = mutate(({ state, value }) => {
  state.isLoading = value
})

function pipe(...operators) {
  return (err, context, next, final = next) => {
    if (err) next(err);
    else {
      // run each operator one after the other
      // if an operator return a Promise
      // wait for the Promise to resolve (or reject)
      // before moving to the next
    }
  };
}

pipe(
  setLoading,
  fetchQueryResult,
  setQueryResult,
  setNotLoading
);

Devtools 🚀

Running the Devtools

npx overmind-devtools

Move fast, break things 🏎

☝️ but not semver

Do we have time for more API ?

type Todo = {
  id: number;
  content: string;
  done: boolean;
};

type State = {
  todos: Array<Todo>;
};

const state: State = {
  todos: [
    {
      id: 1,
      content: "Do this first",
      done: false
    }
  ]
};

import { Derive } from "overmind";

const todoCount: Derive<number> = state =>
  state.todos.length;

type State = {
  todos: Array<Todo>;
  todoCount: Derive<number>;
};

const state: State = {
  todos: [],
  todoCount
};

async function fetchData(
  param: string
): Response {
  // ...
}

const effects = {
  fetchData
};

import { Action } from "overmind";

export const createTodo: Action<string> = async ({
  value,
  createId,
  state,
  getRandomColorAsync
}) => {
  const color = await getRandomColorAsync();
  const newTodo = {
    id: createId(),
    color,
    content: value,
    done: false
  };
  state.todos.push(newTodo);
};

const actions = {
  createTodo
};

import { pipe, Pipe, debounce } from "overmind";
import {
  setQuery,
  filterIsQueryNotEmpty,
  setResultFetching,
  fetchResult,
  setResult
} from "./operations";

const onQueryInputChangeAction: Pipe<
  string
> = pipe(
  setQuery,
  debounce(200),
  filterIsQueryNotEmpty,
  setResultFetching,
  fetchResult,
  setResult
);

const actions = {
  onQueryInputChangeAction
};

// operations.ts
import { map, filter, mutate } from "overmind";

export const filterIsQueryNotEmpty = filter(
  ({ value }) => value !== ""
);

export const fetchResult = map(
  ({ api, value: query }) =>
    api.fetchResult(query)
);

export const setQuery = mutate(
  ({ state, value: query }) => {
    state.query = query;
  }
);

import { Overmind, TApp } from "overmind";

const config = {
  state,
  effects,
  actions
};

declare module "overmind" {
  interface IApp extends TApp<typeof config> {}
}

export const app = new Overmind(config);

import {
  TConnect,
  createConnect
} from "overmind-react";

const app = new Overmind(config);

export type Connect = TConnect<typeof app>;

export const connect = createConnect(app);

import * as React from "react";
import { connect, Connect } from "../../app";

const AddTodo: React.SFC<Connect> = ({ app }) => (
  <div>
    <form
      onSubmit={event => {
        event.preventDefault();
        app.actions.addTodo();
      }}
    >
      <input
        placeholder="I need to..."
        value={app.state.newTodoTitle}
        onChange={app.actions.changeNewTodoTitle}
      />
      <button disabled={!app.state.newTodoTitle}>
        add
      </button>
    </form>
  </div>
);

export default connect(AddTodo);