Use-hooks-store NPM

use-hooks-store 🏪

A React Hooks state manager

Depends on React Hooks which are available as of react version 16.8.0 and higher.

Installation

    #Yarn
    yarn add use-hooks-stroe

    # npm
    npm install --save use-hooks-store

Usage

// index.js

import React from 'react';
import { Provider } from 'use-hooks-store';
import reducer from '../../state/reducer';
import AddTodo from './AddTodo';
import TodoList from './TodoList';

const TodoApp = () => {
  return (
    <Provider state={undefined} reducer={reducer} enableDebug={true}>
      <h1>Todo Hooks Reducer</h1>
      <AddTodo />
      <TodoList />
    </Provider>
  );
};

export default TodoApp;

// AddTodo.js

import React from 'react';

import useForm from '../useForm';
import { useStore } from 'use-hooks-store';
import { addTodo } from '../../state/actions';

const AddTodo = () => {
  const actionCreators = useStore(undefined, {
    addTodo
  })[1];

  const { values, handleChange, reset } = useForm();

  const handleSubmit = event => {
    event.preventDefault();
    // dispatch(addTodo(values));
    actionCreators.addTodo(values);
    reset();
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        data-testid="todo-input"
        name="todo"
        className="App-todo-input"
        value={values.todo || ''}
        onChange={handleChange}
        required
      />
      <button data-testid="submit-button" className="App-todo-button">
        Add
      </button>
    </form>
  );
};

export default AddTodo;

// TodoList.js

import React from 'react';

import { useStore } from 'use-hooks-store';
import { deleteTodo } from '../../state/actions';

const TodoList = () => {
  const [todos, dispatch] = useStore(({todos}) => todos);
  const handleDeleteItem = event => {
    event.preventDefault();
    dispatch(deleteTodo(event.target.dataset.id));
  };

  if (!todos || !todos.length) return null;

  return (
    <ul data-testid="todo-list" className="App-todo-list">
      {todos.map(todo => (
        <li key={todo.id}>
          {todo.label}{' '}
          <button data-testid="todo-delete" data-id={todo.id} onClick={handleDeleteItem}>
            X
          </button>
        </li>
      ))}
    </ul>
  );
};

export default TodoList;

API

usestore, is very similar to react-redux in away it enable you to mapStateToProps (mapStateAs) and mapDispatchToProps (mapActionsAs).

Provider

React component used to pass state to useStore consumers

property	default	description
state	undefined	store initial state
reducer		The reducer function to handle action dispatch. Required!
enableDebug	false	When true, every action will be logged to console or to Redux devtools

useStore

React hook. Used consume Provider's context state. Receives two optional parameters.

name	type	description
mapStateAs	function	Passed in the state and returns an object of the mapped state
mapActionsAs	object	A dictionary of string, function. When undefined, reducer 'dispatch' function is returned

Handling async actions

The mapActionAs, will handle async action creators. When passing in an async action creator, usestore will check if the action creator is of type promise. If so, it will await it to resolve. A promise action creator, most resolve an action.