quickapp-redux

快应用与 Redux.js 之间的桥接层，使得当 redux.js store 数据变更时，将新数据注入快应用组件，驱动组件重新渲染。

使用示例

npm install --save quickapp-redux

// app.mix 的 <script> 标签内部
import { connectApp } from 'quickapp-redux'
import { createStore } from 'redux'

// Just a reducer example for creating store
const store = createStore(function reducer (state = { a: 1, b: 1 }, action){
  switch (action.type) {
    case 'INCREASE_A':
      return { ...state, a: state.a + 1 }
      break;
    default:
      return state
  }
})

export default connectApp(store, {
  /**manifest**/
})

// components/foo/foo.js
import { connect } from 'quickapp-redux'

const foo = {
  onClickSomething () {
    this.dispatch({ type: 'INCREASE_A' })
  },
}

export default connect(
  function mapStateToData ({ a }) {
    return { a }
  },
  {
    // Optionally do something after map state to data,
    // for example update UI that are not the template driven by data.
    componentWillReceiveDataPatch: (component, dataPatch, state) => {
      component.$page.setTitleBar({ text: dataPatch.a })
    },
  }
)(foo)

// components/foo/foo.mix 的 <script> 标签内部
export * from './foo'

mcfe/quickapp-redux

quickapp-redux

使用示例