Documentation

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

1. Installation

a. YARN

yarn add react-reex@latestCopy 

b. NPM

npm install react-reex@latest --saveCopy 

2. Configuration

You must to do the configuration below if you need to use it as global store.

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 counterStoreCopy 

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 storeCopy 

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>
  )
}Copy 

d. Import store folder in application main

In App.tsx

import React from "react"

import "../store" // Add this

export default function App() {
  return <>{/* Your application code */}</>
}Copy 

Core concepts

Documentation and examples for state, getters, actions, mutations

3. State

Use useReexState() hook to access your current state's values. Below is an example of store that we will use.

import { createModule } from "react-reex"

const counterStore = createModule({
  state() {
    return {
      count: 0,
    }
  },
})

export default counterStoreCopy 

useReexState

The states are used with the useReexState() hook. Your component will be notified only of the change connected to your states.

• reactjs

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

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

  return <span>{count}</span>
}Copy 

• react-native

import React from "react"
import { Text } from "react-native"
import { useReexState } from "../store"

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

  return <Text>{count}</Text>
}Copy 

4. Getters

Use useReexGetter() hook to access your current state's values. You can also use getters for computed logic. Below is an example of store that we will use.

import { createModule } from "react-reex"

const counterStore = createModule({
  name: "counter",
  state() {
    return {
      count: 0,
    }
  },
  getters: {
    double() {
      return this.count * 2
    },
  },
  actions: {
    ...
  },
  mutations: {
    ...
  },
  events: {
    ...
  },
})

export default counterStoreCopy 

useReexGetter

The getters are used with the useReexGetter() hook. Your component will be notified only of the change connected to your getters.

• reactjs

import React from "react"
import { useReexGetter } from "../store"

const Counter = () => {
  const double = useReexGetter("counter/double")

  return <span>{double}</span>
}

• react-native

import React, { useEffect } from "react"
import { Text } from "react-native"
import { useReexGetter } from "../store"

const Counter = () => {
  const double = useReexGetter("counter/double")

  return <Text>{double}</Text>
}Copy 

5. Actions

Use actions for asynchronous data operations, for example REST API calls. The this scope is an object with five keys:

a. Use dispatch in a store

• state: this is the current state of the current store
• dispatch: to call another action that's dependent on your current action's data and to alter the current state.
• getState: to get any state in the current store or another
• getGetter: to get any getter in the current store or another
• commit: to call any mutation in the current store or another

import { createModule } from "react-reex"

const counterStore = createModule({
  state() {
    return {
      count: 0,
    }
  },
  getters: {
    double() {
      return this.count * 2
    },
  },
  actions: {
    increment() {
      this.commit("setCount", 1)
    },
    incr() {
      this.dispatch("increment")
    },
  },
  mutations: {
    setCount(value) {
      this.count = value
    },
  },
})

export default counterStoreCopy 

b. Use dispatch in a component

To use an action in a component, use the dispatch(). Actions always return a promise. They don't get re-created, so you're safe with using them as dependencies for useEffect or useCallback.

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

const Counter = () => {
  useEffect(() => {
    store.dispatch("counter/increment")
  }, [])

  return <></>
}Copy 

6. Mutations

Use mutations to change your current state's values. Mutations are synchronous operations and can be called with the commit() or inside an action.

a. Declare mutation in a store

Below is an example of store that we will use.

import { createModule } from "react-reex"

const counterStore = createModule({
  state() {
    return {
      posts: [],
    }
  },
  ...
  mutations: {
    setPosts(data) {
      this.posts = data
    },
    addPost(data) {
      this.posts = [...this.posts, data]
    },
    deletePostByIndex(index) {
      this.posts = this.posts.filter((p, i) => i !== index)
    },
  },
})

export default counterStoreCopy 

b. Use commit in a component

To use a mutation in a component, use the commit().

• reactjs

import React from "react"
import store from "../store"

const PostComponent = () => {
  const handlePostAdd = () => {
    store.commit("counter/addPost", {
      id: 1,
      title: "New post to be added",
      body: "Awesome text inside",
    })
  }

  return <button onClick={handlePostAdd}>Add new post</button>
}Copy 

• react-native

import React from "react"
import { Button } from "react-native"
import store from "../store"

const PostComponent = () => {
  const handlePostAdd = () => {
    store.commit("counter/addPost", {
      id: 1,
      title: "New post to be added",
      body: "Awesome text inside",
    })
  }

  return <Button onPress={handlePostAdd} title='Add new post' color='#841584' />
}Copy 

7. Hooks and utils

import { createModule } from "react-reex"

const counterStore = createModule({
  name: "counter",
  state() {
    return {
      count: 0,
    }
  },
  getters: {
    double() {
      return this.count * 2
    },
  },
  actions: {
    ...
  },
  mutations: {
    ...
  },
  events: {
    ...
  },
})

export default counterStoreCopy 

import { useReexModule } from "../store"

function CounterComponent() {
  const { state } = useReexModule('counter')

  return (
    <div>{state.count}</div>
  )
}Copy 

import React from "react"
import { useMounted } from "react-reex"

function MyComponent() {
  useMounted(() => {
    console.log("Component mounted")
  })

  return <></>
}Copy 

import React, { useEffect } from "react"
import { useFetch } from "react-reex"

function CButton() {
  const fetch = useCallback(async function () {
    return {
      message: "done",
    }
  }, [])

  const { fetcher, loading, data } = useFetch(fetch)

  useEffect(() => {
    console.log(loading)
  }, [loading])

  return <button onClick={fetcher}>RUN</button>
}Copy 

import React, { useCallback } from "react"
import { resetStore } from "react-reex"

function MyComponent() {
  const reset = useCallback(() => {
    resetStore()
  }, [resetStore])

  return <button onClick={reset}>Reset store</button>
}Copy 

import React, { useCallback } from "react"
import { resetStore } from "react-reex"

function MyComponent() {
  const reset = useCallback(() => {
    resetStore()
  }, [resetStore])

  return <Button onPress={reset} title='Reset store' />
}Copy 

import { useEffect } from "react"
import store from "../store"

function MyComponent() {
  useEffect(() => {
    const double = store.getGetter("counter/double")
    console.log("Getter value :", double)
  }, [])

  return <></>
}Copy 

import { createModule } from "react-reex"

const counterStore = createModule({
  state() {
    return {
      count: 0,
    }
  },
  getters: {
    double() {
      return this.count * 2
    },
  },
  actions: {
    increment() {
      this.commit("setCount", 1)
    },
  },
  mutations: {
    setCount(value) {
      this.count = value
    },
  },
})

export default counterStoreCopy 

import { useEffect } from "react"
import store from "../store"

function MyComponent() {
  useEffect(() => {
    const count = store.getState("count")
    console.log("count value :", count)
  }, [])

  return <></>
}Copy 

import { createModule } from "react-reex"

const counterStore = createModule({
  state() {
    ...
  },
  getters: {
    ...
  },
  actions: {
    async getMessage() {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve({ message: 'done' });
        }, 2000)
      });
    },
  },
  mutations: {
    ...
  },
})

export default counterStoreCopy 

import { useEffect } from "react"
import store from "../store"

function MyComponent() {
  const { data, fetcher, loading } = useReexAction("counter/getMessage")
  useEffect(() => {
    console.log("// --- //", loading)
  }, [loading])
  return (
    <div>
      {data && data.message && <span>{data.message}</span>}
      <button onClick={fetcher}>Start</button>
    </div>
  )
}Copy 

import { createModule } from "react-reex"

const counterStore = createModule({
  state() {
    return {
      count: 0,
    }
  },
  getters: {
    double() {
      return this.count * 2
    },
  },
  actions: {
    increment() {
      this.count++
    },
  },
})

export default counterStoreCopy 

import store from "../store"

function CounterSubscribe() {
  store.subscribe("counter/count", function ({ state }) {
    console.log("Count updated", state.count)
  })

  return <></>
}Copy 

8. Store Persistent

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

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

// Add this
store.enablePersistStore({
  setItem(d, v: any) {
    localStorage.setItem(d, JSON.stringify(v))
  },
  getItem(d) {
    return JSON.parse(localStorage.getItem(d) as string)
  },
  removeItem(d) {
    return localStorage.removeItem(d)
  },
})

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

export default storeCopy 

import { createModule } from "react-reex"

const counterStore = createModule({
  state() {
    return {
      count: 0,
    }
  },
  ...
})

// Add this
counterStore.enablePersistStore({
  setItem (d, v: any) {
    localStorage.setItem(d, JSON.stringify(v))
  },
  getItem (d) {
    return JSON.parse(localStorage.getItem(d) as string)
  },
  removeItem (d) {
    return localStorage.removeItem(d)
  },
})

export default counterStoreCopy 

9. Module structure

All files with suffix /(\*?\.store\.(js|ts|jsx|tsx))$/ in src folder will consider as store module and will combine with the global store.

- (root folder)
  - package.json
  - public
  - src
    - store
      - counter
        - index.ts
      - user
        - index.ts
      - index.ts
    - modules
      - home
        - page.tsx
        - home.store.ts
      - profile
        - page.tsx
        - profile.store.ts
Copy 

In src/modules/home/home.store.ts

import { createModule } from "../reex";

const homeStore = createModule({
  name: "home",
  state: {
    nbr: 0,
  },
  getters: {
    double() {
      return this.nbr * 2;
    },
  },
  actions: {
    increment() {
      this.nbr++;
    },
  },
  mutations: {
    setCount(v: number) {
      this.nbr = v;
    }
  },
});

export default homeStore;Copy 

Issues

A Issues is a list of bugs and answers on a particular topic.