React-HSC

Made with create-react-library

React Hook Store Context

It is a Simple Hook Store Context for react project using hooks. Global State Management.

CodeSandbox Basic Example

Install

React HSC is available as a package on NPM for use with a module in your React application:

# NPM
npm install react-hsc

# Yarn
yarn add react-hsc

Purpose

The Redux HSC package is intended to be a simple alternative to REDUX for handling APPLICATION STATUS. It was originally created to understand the handling of REACT's useContext.

1. StoreContext is a default component context.

2. createStore functionality handles declared reducers, similar to REDUX's combineReducers.

3. useSelector functionality manages access to the ROOT-STATE similar to REDUX's useSelector.

4. useDispatch functionality triggers an action that will be sent to the declared REDUCERS, this method supports parameters like STRING, ACTION, FUNCTION, ASYNC FUNCTION.

NOTE

Additionally, the connection functionality to the REDUX-DEV-TOOLS plugin was included to see the change of state managed by the library.

Usage

import React from 'react'
import ReactDOM from 'react-dom'
import StoreContext, { createStore, useSelector, useDispatch } from 'react-hsc'

// 1.- Reducer Function
export const counterReducer = (state, action) => {
    switch (action.type) {
        case '++':
            return { counter: state.counter + 1 };
        case '--':
            return { counter: state.counter - 1 };
        default:
            return state;
    }
}

// 2.- HSC Store
export const basicStore = createStore({
    C1: [counterReducer, { counter: 0 }],
});

// 3.- Basic App with StoreContext
export const BasicApp = () => {
    return (
        <StoreContext.Provider value={basicStore}>
            <CounterDisplay />
            <CounterButtons />
        </StoreContext.Provider>
    )
}

// 4.- useSelector Example
export const CounterDisplay = () => {
    let { counter } = useSelector(state => state.C1);
    return (
        <h3>Counter: {counter}</h3>
    )
}

// 5.- useDispatch Example
export const CounterButtons = () => {
    const dispatch = useDispatch();
    const onClick = (type) => {
        dispatch({ type })
    }
    return (
        <div>
            <button onClick={e => onClick("++")}>+1</button>
            <button onClick={e => onClick("--")}>-1</button>
        </div>
    )
}

// 6.- Run Example
ReactDOM.render(<BasicApp />, document.getElementById('root'))

Documentation

The React-HSC docs are available at https://yracnet.github.io/react-hsc/manual.html.

Example

The React-HSC docs are available at https://yracnet.github.io/react-hsc/index.html.

License

MIT © Willyams Yujra