aerux
TypeScript icon, indicating that this package has built-in type declarations

4.2.0 • Public • Published

aerux

node npm license Build Status Standard - JavaScript Style Guide Coverage Status codecov Known Vulnerabilities

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

Package Sidebar

Install

npm i aerux

Weekly Downloads

8

Version

4.2.0

License

MIT

Unpacked Size

36.7 kB

Total Files

27

Last publish

Collaborators

  • kagawa