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');