Odux

English | 简体中文

A friendly and easy-to-use front-end state management library. (need TypeScript)

---

Feature

• Out of box, Low learning costs and less concept
• Type friendly, Describe the data model using OO, intuitive
• Easy to integrate, Can be seamlessly integrated into the other Redux-based state management system, or run independently from Redux

Install

npm i odux --save

Quick Start

First

TypeScript config:

// tsconfig.json
{
  "compilerOptions": {
    ...
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true
  }
}

Store/Model

class AStore extends BaseStore {
  testData = {
    str: 'Hello World!',
    count: 0,
  };
 
  add() {
    this.testData.count++;
  }
}

Component

@connect()
class App extends PureComponent {
  @inject()
  aStore: AStore;
 
  onClick = () => {
    this.aStore.add();
  };
 
  render() {
    const { testData } = this.aStore;
    return (
      <div>
        <p>{testData.str}</p>
        <p>count: {testData.count}</p>
        <button onClick={this.onClick}>Add</button>
      </div>
    );
  }
}

Demo

• Hello World, counter

Integration with other redux-base

dva

const odux = createOduxForDva();
const app = dva({
  extraEnhancers: [odux.extraEnhancers],
  onReducer: odux.onReducer,
  // onReducer: reducer => otherReducer(odux.onReducer(reducer)),
});

createOduxEnhancer

Thanks

immer