re-modulex

一个让 redux 在 React 应用上写起来像 vuex 一样简单的轮子

安装

1npm install re-modulex --save

基础用法

更多使用方法请参考 全特性Demo

1import React, { Component } from 'react'
2import { render } from 'react-dom'
3import { createStore } from 'redux'
4import { ModuleProvider, connectModules, createModule } from 're-modulex'
5
6const { reducer } = createModule({
7  name: 'main',
8  state: {
9    counter: 0
10  },
11  actions: ({ commit }) => ({
12    add: () => commit('add', 1),
13    reduce: () => commit('reduce', 1)
14  }),
15  mutations: {
16    add: (state, amount) => ({
17      counter: state.counter + amount
18    }),
19    reduce: (state, amount) => ({
20      counter: state.counter - amount
21    })
22  },
23  getters: {
24    square: state => state.counter * 2
25  }
26})
27
28const store = createStore(reducer)
29
30@connectModules(['main'])
31class App extends Component {
32  render() {
33    const { main } = this.props
34
35    return (
36      <div>
37        当前: {main.state.counter}
38        gettters.square = {main.getters.square}
39        <div>  
40          <button onClick={() => main.dispatch.add()}>加1</button>
41          <button onClick={() => main.dispatch('reduce')}>减1</button>
42        </div>
43      </div>
44    )
45  }
46}
47
48render(
49  <ModuleProvider store={store}>
50    <App />
51  </ModuleProvider>,
52  document.getElementById('app')
53)

使用 Hooks

1
2import React from 'react'
3import { useModule } from 're-modulex'
4
5export default function App() {
6  const main = useModule('main')
7  // or const { main } = useModules(['main'])
8
9  return (
10    <div onClick={() => { main.commit.add() }}>
11      {main.state.counter}
12    </div>
13  )
14}

---

使用 react-redux

不想用配套的 ModuleProvider 和 connectModules，想配合 react-redux ？

1
2...
3
4import { Provider, connect } from 'react-redux'
5import { applyStore, mapModules } from 're-modulex'
6
7...
8
9const store = createStore(reducer)
10applyStore(store) // 必须要调用 applyStore，建立 re-modulex 和 store 的连接
11
12...
13
14@connect(state => ({
15  else: state.else,
16
17  // 在 mapStateToProps 中使用 mapModules 注入 modules
18  // （在 mapDispatchToProps 中也行）
19  ...mapModules(modules => ({
20    main: modules.main
21  }))
22}))
23class App extends Component {
24
25...
26
27render(
28  <Provider store={store}>
29    <App />
30  </Provider>,
31  document.getElementById('app')
32)
33
34...