react-redux-human-hooks

    0.10.2 • Public • Published

    React Redux Human Hooks

    David npm bundle size NPM

    React hooks for redux that humans can understand. Integrate redux into your React app one npm install away.

    Introduction

    The main goal of react-redux-human-hooks is that you can integrate Redux into your app in a simple and fast way, while maintaining performance.

    Install

    npm:

    npm i react-redux-human-hooks
    

    yarn:

    yarn add react-redux-human-hooks
    

    Usage

    1. Create your actions

    import {createAction,createActions} from  'react-redux-human-hooks';
     
    //Define action types here
    export  const { setAnimal, otherAction} 
    =  createActions('SET_ANIMAL','OTHER_ACTION')
     
    //You can specify them one by one
    export  const  setDog  =  createAction('SET_DOG');
      
    //Or you can write your own actions creators
    export  const  setSquanch  =  createAction('SET_SQUANCH',payload=>{
        //do something
        return  'Squanchy';
    });

    2. Create your reducer

    import {createReducer} from  'react-redux-human-hooks'
    import  *  as  actions  from  './actions';
     
    const  reducer  =  createReducer({
        [actions.setAnimal]: (state, action) => ({
            ...state,
            animal:  action.payload
        }),
        [actions.setDog]: (state, action) => ({
            ...state,
            animal:  'Dog'
        }),
        [actions.setSquanch]: (state, action) => ({
            ...state,
            animal:  'Squanchy'
        }),
        },
        //Initial state
        {
            animal:  'Cat',
        }
    );
     
    export  default  reducer;

    3. Add Provider to your app

    import  React  from  'react';
     
    //We provide the necessary modules, you can also import them from redux and react-redux
    import {Provider,createStore} from  'react-redux-human-hooks';
     
    import  rootReducer  from  './reducer';
    import  MyComponent  from  './MyComponent';
     
    //Create the store, in this case we are using teh Redux Devtools middleware
    const  store  =  createStore(rootReducer,
    window.__REDUX_DEVTOOLS_EXTENSION__  &&
    window.__REDUX_DEVTOOLS_EXTENSION__());
     
    function  App() {
        return (
            //Note we are wrapping the entire app using Provider
            <Provider  store={store}>
                <div  className="App">
                    <header  className="App-header">
                        <h1>
                            React Redux Human Hooks Example
                        </h1>
                    </header>
                    <MyComponent/>
                </div>
            </Provider>
        );
    }
     
    export  default  App;

    4. Use it in your components

    import  React  from  'react';
    import {useReduxState,useBindActionCreators} from  'react-redux-human-hooks';
    import  *  as  actions  from  './actions';
     
    function  MyComponent() {
        const {setDog,setAnimal,setSquanch} =  useBindActionCreators(actions);
        const {animal} =  useReduxState(
            state=>state
        )
     
        return (
            <div  style={{backgroundColor:'#F1F1F1',display:'flex',flexDirection:'column'}}>
                <h3>Animal: {animal}</h3>
                <div>
                    <button  onClick={()=>setDog()}>Set Dog</button>
                    <button  onClick={()=>setAnimal(Math.random()>0.5?'Cat':'Moose')}>Set Random</button>
                    <button  onClick={()=>setSquanch()}>Set Squanch</button>
                </div>
            </div>
        );
    }
     
    export  default  MyComponent;

    Install

    npm i react-redux-human-hooks

    DownloadsWeekly Downloads

    8

    Version

    0.10.2

    License

    ISC

    Unpacked Size

    572 kB

    Total Files

    21

    Last publish

    Collaborators

    • avatar