React-reex

React-reex is a lightweight global state management solution for React and React-native. It depends on React and doesn't use React Context API but only based on useState hook

Documentation

Please see official website

Installation

a. YARN

yarn add react-reex@latest

b. NPM

npm install react-reex@latest --save

Usage

a. CreateModule

In /store/counter/index.ts

import { createModule } from "react-reex"

const counterStore = createModule({
  name: "counter",
  state() {
    return {
      count: 0,
    }
  },
  getters: {
    double() {
      return this.count * 2
    },
  },
  actions: {
    increment() {
      this.commit("setCount", this.count + 1)
    },
    decrement(v: number) {
      this.count--
    },
  },
  mutations: {
    setCount(value: number) {
      this.count = value
    },
  },
  events: {
    count: {
      handler(value) {
        console.log("Count has changed", value)
      },
    },
  },
})

export default counterStore

b. CreateStore

In /store/index.ts

import { createStore } from "react-reex"
import counterStore from "./counter"

const store = createStore({
  modules: {
    counterStore,
  },
  created() {
    console.log("created global")
  },
  before(data) {
    console.log("before global", data)
  },
  handler(state) {
    console.log("handler global", state)
  },
})

export const { useReexState, useReexGetter, useReexModule, useReexAction } = store

export default store

c. Create a component

In /components/MyComponent.tsx

import React from "react"
import store, { useReexState } from "../store"

const Counter = () => {
  const count = useReexState("counter/count")

  return (
    <button
      onClick={() => store.dispatch("counter/increment")}
    >
      {count}
    </button>
  )
}

License

MIT