aerux

An easy way to use redux with react

Install

npm install aerux

Use

// es6
import { createStore, createModel, connect, actions } from 'aerux'
// or
const { createStore, createModel, connect, actions } = require('aerux')

const store = createStore(options)

// reducers/count.js
import { createModel } from 'aerux'

export const { actions, reducer } = createModel({
  namespace: 'count',
  state: 0,
  actions: {
    plus: count => count,
    minus: count => count
  },
  reducers: {
    plus: (state, { payload }) => state + payload,
    minus: (state, { payload }) => state - payload
  }
})

// Count.jsx
import { connect } from 'aerux'

class Count extends React.Component {
  render() {
    // ...
  }
}

export default connect(state => ({
  count: state.count
}))(Count)

// App.jsx
import { Provider } from 'react-redux'
import Count from './Count'

const App = () => (
  <Provider store={store}>
    <Count />
  </Provider>
)

API

createStore

create store with redux.createStore

createStore({
  middlewares,
  enhancers,
  compose,
  state,
  reducers
})

name	description	type	default	optional
middlewares	redux middleware	Array	[]	true
enhancers	redux enhancer	Array	[]	true
compose	used for redux devtool	-	redux.compose	true
state	initial state	any	{}	true
reducers	initial reducers	ReducersMapObject	{}	true

createModel

create model with redux-actions

const { actions, reducer } = createModel({
  namespace,
  state,
  actions,
  reducers
})

name	description	type	default	optional
namespace	namespace	string	undefined	false
state	initial state	any	null	true
actions	redux actions	ActionMap<Payload, Meta>	true
reducers	action handlers	ReduxCompatibleReducer<State, Action<Payload>> | ReduxCompatibleReducerMeta<State, Action<Payload>, any>	{}	true

Note: if you create model after create store, you can use actions from aerux directly

Notes

• namespace: if you present namespace and store is created, reducer will be auto injected to store

• actions: actionCreator is created by redux-actions

• reducers: created by redux-actions

actions

action which created in createModel will be auto injected to it, you can call it directly

actions[namespace][actionName]

actions.count.add()

connect

connect store and component like redux.connect, but much better

connect(mapStateToProps, actions)(Component)

Note: you can use actions from aerux directly, no connect actions need, ex:

import { actions } from 'aerux'

class DemoComponent extends React.Component {
  add = () => {
    actions.count.add()
  }
  render() {
    // ...
  }
}

connect(mapStateToProps)(DemoComponent)

store.actions[namespace][actionName]

another alias for actions

store.actions.count.add()

store.injectReducer

This function is used for async inject reducer, for code-splitting

store.hotReplaceReducer

This function is used for HMR when build application with Webpack