Minivan

this is for state management with react

How to use it.

Create a stores directory for your stores, which are just objects. Stores must have a name.

example store

export default {
  name: 'Todos',
  todos: []
};

Create mutation functions with your stores, or in different files.

Mutations take to arguments the mutate function, and the the store that you are mutating.

youse the mutate function to mutate the store

example mutation

export function todoMutations(mutate, store) {
  return {
    addTodo: (text) => mutate(() => store.todos.push({ text, done: false })),
    toggleDone: (index) => mutate(() => {
      store.todos[index].done = !store.todos[index].done;
    })
  };
};

create an index file in stores directory

import newTodoStore from './newTodo';
import todoStore from './todo';
import { combineStores } from 'minivan/minivan';

export default combineStores(newTodoStore, todoStore);

Create a file called drive.js or whatever you want.

import { Store, createDrive } from 'minivan/minivan';
import stores from './stores';

const store = new Store(stores);
const drive = createDrive(store.values, store.listen, store.mutate);

export default drive;

youse drive to connect your stores and mutations to a component

use the name and the mutation function

example

import React, { Component } from 'react';
import drive from './drive';
import { newTodoMutations } from './stores/newTodo';
import { todoMutations } from './stores/todo';

class NewTodo extends Component {
  addOnClick() {
    this.props.todoMutations.addTodo(this.props.NewTodo.text);
    this.props.newTodoMutations.changeText('');
  }

  render() {
    return (
      <div>
        <input
          placeholder="task"
          value={this.props.NewTodo.text}
          onChange={(event) => this.props.newTodoMutations.changeText(event.target.value)}
        />
        <button onClick={this.addOnClick.bind(this)}>Add</button>
      </div>
    );
  }
}

let stores = ['NewTodo', 'Todos'];
let mutations = [newTodoMutations, todoMutations];

export default drive(NewTodo, stores, mutations);

mutations will be passed the store that has the same index as it

if you have just one store or mutation you don't need to pass an array

you can also have stores without mutations

you must have the same amount or less mutations then stores

example

drive(NewTodo, 'NewTodo', newTodoMutations);
drive(NewTodo, ['NewTodo', 'Todos']);
drive(NewTodo, 'NewTodo');