Relax

A React state management library Based on Hooks, it begins as a fork of stamen

Feature

Relax is opinionated, it has these benefits:

• Simplified API, like Vuex
• Typescript friendly
• Hooks based, no connect、mapState
• Multiple store/module

Installation

yarn add relax-ts

Quick Start

import React from 'react'
import ReactDOM from 'react-dom'
import { createStore } from '../../src'

const { useSelector, dispatch, Provider } = createStore({
  state: {
    count: 0,
  },
  reducers: {
    increment(state) {
      state.count++
    },
    decrement(state) {
      state.count--
    },
  },
  effects: {
    async asyncIncrement() {
      await new Promise(resolve => {
        setTimeout(() => {
          resolve()
        }, 1000)
      })
      dispatch('increment')
    },
  },
})

const Counter = () => {
  const count = useSelector(S => S.count)
  return (
    <div>
      <span>{count}</span>
      <div>
        <button onClick={() => dispatch('decrement')}>-</button>
        <button onClick={() => dispatch('increment')}>+</button>
        <button onClick={() => dispatch('asyncIncrement')}>async+</button>
      </div>
    </div>
  )
}

function App() {
  return (
    <Provider initialState={{ count: 10 }}>
      <Counter />
    </Provider>
  )
}

ReactDOM.render(<App />, document.getElementById('root'))

Check on CodeSandbox: Basic | Async

Examples

• Basic - Most basic usage
• TodoMVC - Relax version TodoMVC

Api

Overview

const someStore = createStore({
  state: {},
  reducers: {},
  affects: {},
})

const { useSelector, dispatch } = someStore

state

The initial state of a Store.

const someStore = createStore({
  state: {
    count: 0,
  },
})

reducers

Two type action in Relax: reducers and effects, you can update state in reducers only.

const someStore = createStore({
  reducers: {
    increment(state, payload) {
      state.count += payload
    },
  },
})

effects

You can handle async actions in effects. Such as Fecthing data via nenwork

const someStore = createStore({
  effects: {
    async asyncIncrement() {
      await new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve()
        }, 1000)
      })
      someStore.dispatch('increment')
    },
  },
})

useSelector

Get state in view using react hooks api.

const App = () => {
  const { useSelector } = counterStore
  const count = useSelector(S => S.count)
  return <span>{count}</span>
}

dispatch

Dispatch an Action to update state.

const App = () => {
  const { useSelector, dispatch } = counterStore
  const count = useStore(S => S.count)
  return (
    <div>
      <span>{count}</span>
      <button onClick={() => dispatch('decrement')}>-</button>
      <button onClick={() => dispatch('increment')}>+</button>
    </div>
  )
}

License

MIT License