easy-use-redux

简化redux使用

Usage no npm install needed!

<script type="module">
  import easyUseRedux from 'https://cdn.skypack.dev/easy-use-redux';
</script>

README

easy-use-redux

不需要繁琐的redux配置,简化使用,再也不需要加班了

构思

根据方法名直接生成Action和reducer,调用方法即dispatch action

不使用state而使用getState

get state()会在编译时期未初始化store报错

USAGE

  1. install
yarn add easy-use-redux
  1. create module store
import {createStore, BaseStore} from '../../../src';

interface State {
  num: number;
}

class CounterStore extends BaseStore<State> {
  namespace: string = 'counter';
  initState = {
    num: 0
  };

  add(p1, p2 = 0) {
    this.setState({
      num: this.getState().num + p1 + p2
    });
  }

  minus() {
    this.setState({
      num: this.getState().num - 1
    });
  }

  asyncAdd() {
    setTimeout(() => {
      this.add(5);
    }, 1000)
  }
}

export default createStore(new CounterStore());
  1. create root store
import {createRootStore} from 'easy-use-redux';
import CounterStore from './counter.store';

export default function configStore() {
  const store = createRootStore([CounterStore], {
    isDev: true,
  });
  return store;
}
  1. provider root view
const App = () => {
  return (
    <Provider store={store}>
      {this.props.children}
    </Provider>
  );
};
  1. global dispatch action
CounterStore.add(1, 2);