minivan

    0.1.1 • Public • Published

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

    Keywords

    none

    Install

    npm i minivan

    DownloadsWeekly Downloads

    3

    Version

    0.1.1

    License

    MIT

    Last publish

    Collaborators

    • mareknewton