A very simplified Redux-like state manage tool with Immer built-in


stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
Minified + gzip package size for @jimengio/rex in KB



Store abstraction based on immer and Context APIs.


In our app, we think Redux is too general and we want a more specific solution for our own case:

  • we want all data wrapped by immer, and in a simpler syntax.
  • better support for TypeScript.
  • since we are manipulating data in a mutating syntax, actions looks redundant so we discourage using it, instead we use mutation functions directly.

Rex prefers MVC pattern from early React apps. There might be performance issues since useContext API is used and we need further investigation.

Notice: you might not need Rex when Hooks APIs is enough for reusing states. you might need Redux or some other libraries if you apps grow really complicated.


npm install @jimengio/rex

Read runnable app example at https://github.com/minimal-xyz/minimal-rex/tree/master/src .

Basically, a Rex app is an MVC app:

import { createStore } from "@jimengio/rex";

export interface IGlobalStore {
  schemaVersion: string;
  data: number;
  branchData: number;
  homeData: number;
  obj: {
    a: number;

export let initialStore: IGlobalStore = {
  schemaVersion: "0.1",
  data: 2,
  branchData: 2,
  homeData: 2,
  obj: { a: 2 },

export let globalStore = createStore<IGlobalStore>(initialStore);
export function doIncData() {
  globalStore.update((store) => {
    store.data += 1;

  globalStore.updateAt("obj", (obj) => {
    obj.a += 1;

First step is to provide th context in root component:

import { RexProvider } from "@jimengio/rex";

const renderApp = () => {
    <RexProvider value={globalStore}>
      <Container />

window.onload = () => {

To read data in child components, use function useRexContext.

Notice that it rerenders on every change, so there might be performance issues when data is large.

let HooksChild: FC<IProps> = (props) => {
  let data = useRexContext((store: IGlobalStore) => {
    return store.data;

  return <pre>{JSON.stringify(data)}</pre>;

For class-based components, use connectRex:

import { connectRex } from "@jimengio/rex";

@connectRex((store: IGlobalStore, ownProps: IProps) => ({ data: store.data }))
export default class Inside extends React.PureComponent<IProps, IState> {
  render() {
    return <pre>{JSON.stringify(this.props.data)}</pre>;


// "Clojure Atom"-like state management
let dataAtom = useAtom({ count: 1 });

let onClick = () => {
  /* replace data */
  dataAtom.resetWith({ count: 0 });
  /* update data by function, frozen by immer */
  dataAtom.swapWith((data) => {
    data.count += 1;

/* get latest state */

/* get latest state with a getter function */


Rex added a log even in release mode for debugging, add run this to turn on:

window.REX_DEV_LOG = true;





If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.