@keegpt/stook v1.0.1

Stook

A react store with hooks!

Install

npm install @keegpt/stook --save

Usage

import React from 'react';
import { Provider, useCombinedReducers, createStore } from 'react-stook';

// App.js

import Content from './components/Content';

function App() {

    const elementReducer = (state, action) => {
        switch (action.type) {
            case 'ADD_ONE':
                // action.payload is available here
                return {
                    count: state.count + 1,
                    list: [...state.list, { name: `Element: ${state.count + 1}`}]
                };
            default:
                return state;
            }
    };

    const reducers = useCombinedReducers({
        elements: React.useReducer(elementReducer, { count: 0, list: [] })
        // another: React.useReducer(anotherReducer, initialState)
    });

    return (
        <>
            <Provider store={createStore(reducers)}>
                <Content />
            </Provider>
        </>
    );
}

// Content.js

import React from 'react';
import { connect } from 'react-stook';

function Content({ elements, addElement }) {

    React.useEffect(() => {
        addElement({ random: 1 });
    }, []);

    return (
        <>
            <span>Counter of elements: {elements.count}</span>
        </>
    );
}

function mapStateToProps(state) {
    return {
        elements: state.elements
    }
}

function mapDispatchToProps(dispatch) {
    return {
        addElement: (payload) => dispatch({ type: 'ADD_ONE', payload })
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Content);