reacters v0.1.0

reacters

don't take it too seriously; a simple builtin global state management in react

Install

npm install reacters --save

Useage

create provider

import { createProvider } from 'reacters'
import { Dispatchers } from 'reacters/lib/typings'

type State = {
  count: number
}

type Reducers = {
  increment: (
    state: State,
    dispatcher: Dispatchers<State, Reducers>,
    payload: { count: number },
  ) => State
}

export const model = createProvider<State, Reducers>({
  name: 'reactx',
  state: {
    count: 1,
  },
  reducers: {
    increment(state, dispatcher, payload) {
      return { ...state, count: state.count + payload.count }
    },
  },
})

use in component

import React from 'react'

import { model } from '../models/reacters'

export const Counter = () => {
  const { state, dispatch } = model.useState(state => state)
  return (
    <div>
      {state.count}
      <a onClick={() => dispatch.increment({ count: 1 })}>增加</a>
    </div>
  )
}

see more details in example