Skip to content
Store abstraction based on immer and Context APIs.
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
rex
src
.editorconfig
.gitattributes
.gitignore
.npmignore
.prettierrc
README.md
package.json
template.ejs
tsconfig-compile.json
tsconfig.json
webpack.config.js
webpack.release.js
yarn.lock

README.md

Rex

Store abstraction based on immer and Context APIs.

Minimal example for Rex: https://github.com/minimal-xyz/minimal-rex/tree/master/src .

Usage

npm install @jimengio/rex

Model:

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 },
};
import { createStore } from "@jimengio/rex";

export let globalStore = createStore<IGlobalStore>(initialStore);

View:

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

const renderApp = () => {
  ReactDOM.render(
    <RexProvider value={globalStore}>
      <Container store={globalStore.getState()} />
    </RexProvider>,
    document.querySelector(".app")
  );
};

window.onload = () => {
  renderApp();
  globalStore.subscribe(renderApp);
};

Controller:

export function doIncData() {
  globalStore.update((store) => {
    store.data += 1;
  });

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

Selector:

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

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

Or use hooks(Caution: it rerenders on every change) with useRexContext:

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

  return <pre>{JSON.stringify(contextData, null, 2)}</pre>;
};

Debug

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

window.REX_DEV_LOG = true;

Workflow

https://github.com/jimengio/ts-workflow

License

MIT

You can’t perform that action at this time.