Skip to content

regularjs/rgl-redux

Repository files navigation

Regular Redux

一个微型模块用于 Regular 组件实现Redux.

build status npm version

npm install rgl-redux

运行要求

  • regularjs 0.6.0-beta.1以上版本
  • webpack+babel 用于构建基于ES6语法的应用

用法

module/App.js:

import 'rgl-redux';
import './module/MyApp';
import { reducer } from './reducers'
import { createStore } from 'redux';

const AppContainer = Regular.extend({
  template: `
  <StoreProvider store={store}>
    <MyApp />
  </StoreProvider>
  `,
  config(data) {
    data.store = createStore(reducer);
  },
});

components/MyComp.js:

import { connect } from 'rgl-redux';
import { changeFoo } from './actions';

const MyComp = Regular.extend({
  name: 'MyComp',
  template: '<div>{foo}</div><button on-click={this.onClick()}>Click Me!</button>',
  onClick() {
    this.$dispatch(changeFoo('bar'));
  }
});

export default connect({
  mapState(state) {
    return {
      foo: state.foo,
    };
  },
  dispatch: true,
})(MyComp);

示例项目

示例项目位于 examples 目录,克隆项目后,运行 npm run example

文档

StoreProvider

位于src/StoreProvider.js

一个Regular容器组件,StoreProvider组件作为提供redux store的容器组件,一般位于应用组件的最外层,需在该组件的 config 中初始化应用的store。StoreProvider类似 react-redux 的 Provider组件,提供了一个上下文环境,处于该环境内的Regular组件都可以通过connect连接至store或得到进行action dispatch的能力。

connect(definition)

位于src/connect.js

用于标识Regular组件,配合StoreProvider向组件内部动态注入mapState方法及 Redux store的dispatch方法。

参数

  • definition.mapState(state, data) (Function): 该方法指定了如何从全局store的当前state中获取当前组件所需要的数据。指定该参数后,组件会订阅Redux store的更新,即在任何时刻store更新时,该方法会被调用。改方法返回一个对象,用于替换当前组件的data,组件的¥update方法会自动调用。如果需要阻止自动调用$update使得组件不进入脏检查阶段,则直接返回false即可。如:
connect({
  mapState(state, data) {
    const foo = state.foo;
    if (!foo || foo.length === data.foo.length) {
      return false;
    }
    return {
      foo
    };
  }
});
  • definition.dispatch (Boolean): 一个布尔属性指定当前组件是否需要进行分发特定操作(dispatch action)。该属性为任意true值时,位于StoreProvider组件内部的组件会被注入 $dispatch 方法,绑定自 Redux的 store.dispatch 方法。

路线图

v0.2.0

  • broadcast event: StoreProvider内的广播事件支持
  • Complicated example: 更完整复杂的示例
  • ActionMap: 一种简洁的方式实现dispatch -> action的映射

Future

  • timeline plugin: 时间线插件,用于提供实现撤销, 重做的操作机制

License

MIT

About

regularjs bindings for Redux

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •