@anderpang/react-hook-store

React hook redux（Encapsulation using react original method）

Installation

$ npm i @anderpang/react-hook-store

Usage

  ininstalState:Object
  StoreContext.Provider
  CreateStore(ininstalState)
  var [state,dispatch]=useStore()
  var [counter,dispatch]=useStore("counter")

Example

App.tsx (Configuration)

import Nav from './components/Nav';
import Home from './views/Home';
import {StoreContext,CreateStore} from "@anderpang/react-hook-store"

// 1
var initialState={
    counter:{
        count:0
    }
};

function App() {
  // 2
  var store=CreateStore(initialState);

  return (
    // 3  
    <StoreContext.Provider value={store}>
      <div className="App">
        <Nav />
        <Home />
      </div>
    </StoreContext.Provider>
  );
}

export default App;

Nav.tsx

import { useStore } from "../@anderpang/react-hook-store"

export default function Nav(){
    var [counter,dispatch]=useStore("counter");

    function onClick(){
        counter.count+=2;
        dispatch(counter);
    }

    return (
        <nav>
            Nav -
            count:{counter.count}
            <button onClick={onClick}>+2</button>
        </nav>
    )
}

Home.tsx

import { useStore } from '@anderpang/react-hook-store';

export default function Home(){
    var [state,dispatch]=useStore();

    function onClick(){
        state.counter.count++;
        dispatch(state);
    }

    return (
        <div>
            home page
            <button onClick={onClick}>Click{state.counter.count}</button>
        </div>
    )
}

Result