api.md

API

查看中文

Module exports

1. Default export a initialize method: import createApp from 'mickey'
2. Component and method

• <ActionsProvider actions>
• injectActions({propName = 'actions', withRef = false})

3. Directly export The following components and methods from dependencies.

• redux
  • compose
  • applyMiddleware
• react-redux
  • connect
• react-router
  • StaticRouter
  • MemoryRouter
  • Redirect
  • Prompt
  • Switch
  • Route
  • withRouter
• react-router-dom
  • HashRouter
  • BrowserRouter
  • Link
  • NavLink

API

Initialization

• createApp(options)
  • options.initialState
  • options.initialReducer
  • options.historyMode
  • options.hooks
    • options.hooks.onError
    • options.hooks.onAction
    • options.hooks.onEffect
    • options.hooks.onReducer
    • options.hooks.onStateChange
    • options.hooks.extraReducers
    • options.hooks.extraEnhancers
  • options.extensions
    • options.extensions.createReducer
    • options.extensions.combineReducers

Methods

• app.model(model)
  • model.namespace
  • model.state
  • model.watcher
  • model.enhancers
  • model.createReducer
  • model[...actionsAndEffects]
• app.eject(namespace)
• app.has(namespace)
• app.load(pattern)
• app.render(component, container, callback)

Properties

• app.store
• app.history
• app.actions
• app.plugin

createApp(options)

Create an instance of Mickey and return it:

import createApp from 'mickey';
const app = createApp(options);

<ActionsProvider actions>

Makes the actions available to the injectActions() calls in the component hierarchy below. We should never use this component, and it was used in the render method, like this:

<ActionsProvider actions={app.actions}>
  <App />
</ActionsProvider>

injectActions(Component, {propName = 'actions', withRef = false})

Inject actions to a React component. By default the propName would be actions. If withRef is true, stores a ref to the wrapped component instance and makes it available via getWrappedInstance() method.

For example, Counter：

import React from 'react'
import { connect, injectActions } from 'mickey'
import './App.css'

const App = props => (
  <div id="counter-app">
    <h1>{props.count}</h1>
    <div className="btn-wrap">
      <button onClick={() => props.actions.counter.decrement()}>-</button>
      <button onClick={() => props.actions.counter.increment()}>+</button>
      <button
        style={{ width: 100 }}
        onClick={() => {
          if (props.loading) {
            alert('loading') // eslint-disable-line
          } else {
            props.actions.counter.incrementAsync()
          }
        }}
      >
        {props.loading ? 'loading' : '+ Async'}
      </button>
    </div>
  </div>
)

export default injectActions(connect(store => ({ ...store.counter }))(App))