README_zh-CN.md

Odux

English | 简体中文

一个类型友好易用的前端状态管理库。（需要 TypeScript）

---

特点

• 开箱即用，极低的学习成本，没有过多概念
• 类型友好，使用 OO 描述数据模型，直观
• 便于集成，可无缝融入其余基于 Redux 的状态管理系统内，亦可脱离 Redux 独立运行

安装

npm i odux --save

快速上手

前置

TypeScript 配置需求：

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

模型定义

class AStore extends BaseStore {
  testData = {
    str: 'Hello World!',
    count: 0,
  };

  add() {
    this.testData.count++;
  }
}

组件使用

@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>
    );
  }
}

示例

• Hello World, 计数器

集成其他 redux-base

dva

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

createOduxEnhancer

Thanks

immer