redux-arena

Redux is a great state management container, which is elaborate and can be easily extent. But there are some problems when resuing a React component binded with Redux, refs to RFC: Reuse complex components implemented in React plus Redux #278.

Features

Redux-Arena will export Redux/Redux-Saga code with React component as a high order component for reuse:

1. When hoc is mounted, it will start Redux-Saga task, initializing reducer of component, and register node on state.
2. When hoc is unmounted, it will cancel Redux-Saga task, destroy reducer of component, and delete node on state.
3. Reducer of component will only accept actions dispatched by current component by default. Revert reducer to accept all actions by set options.
4. Virtual ReducerKey: Sharing state in Redux will know the node's name of state, it will cause name conflict when reuse hoc sometime. Using vReducerKey will never cause name conflict, same vReducerKey will be replaced by child hoc.
5. Like one-way data flow of Flux, child hoc could get state and actions of parent by vReducerKey.
6. Integration deeply with Redux-Saga, accept actions dispatched by current component and set state of current component is more easily.

Integration with React-Router is included.

Install

npm install redux-arena --save

Example

A complete example is under /example directory, including a lot of HOC. And add redux-devtools for state changing show. Online example can be found here: Here

Screenshots

Quick Start

1. Export react component, actions, reducer, saga as React component.

import { bundleToComponent } from "redux-arena/tools";
import state from "./state";
import saga from "./saga";
import * as actions from "./actions";
import PageA from "./PageA";

export default bundleToComponent({
  Component: PageA,
  state,
  saga,
  actions
})

2. Initial arenaStore and provide it for redux. PageA Component is exported in last step.

import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import { createArenaStore } from "redux-arena";
import PageA from "./pageA";

let store = createArenaStore();

let app = document.getElementById("app");
ReactDOM.render(
  <Provider store={store}>
    <PageA />
  </Provider>,
  app
);

API Reference

• EnhancedRedux API
  • createArenaStore(reducers, initialStates, enhencers, sagaOptions): enhancedStore
• Bundle API
• Tools API
  • bundleToComponent(bundle, extraProps)
  • bundleToElement(bundle, props, extraProps)
• Saga API
  • getSceneState()
  • getSceneActions()
  • putSceneAction(action)
  • setSceneState(state)
  • takeEverySceneAction(pattern, saga, ...args)
  • takeLatestSceneAction(pattern, saga, ..args)
  • takeSceneAction(pattern)

EnhancedRedux API

createArenaStore(reducers, options): enhancedStore

Creates a enhanced redux store for redux-arena

• reducers: object - A set of reducers.

  Example

  {
    frame: (state)=>state,
    page: (state)=>state,
    ...
  }
  

• options: object - Options of redux arena store.

  • initialStates: object - A set of initial states. Example

     {
       frame: { location:"/" },
       page: { cnt:0 },
       ...
     }
    

  • enhencers: array - An array of redux enhencers.

    Example

    import { applyMiddleware } from "redux";
    import thunk from "redux-thunk";
    
    let enhancers = [applyMiddleware(thunk)];
    

  • sagaOptions：object - Options used for redux-saga.

  • middlewares: array - An array of redux middlewares.

    Example

    import thunk from "redux-thunk";
    
    let middlewares = [thunk];
    

• enhancedStore：object - An enhanced redux store which owning following method.

  • runSaga(saga) - start a saga task.

Bundle API

A Bundle is an object which contains react-component, actions, reducer, saga and options, used for ArenaScene high order component.

Example

import state from "./state";
import saga from "./saga";
import * as actions from "./actions";
import Component from "./Component";

export default {
  Component,
  state,
  saga,
  actions,
  options:{
    vReducerkey:"vKey1"
  }
}

createArenaStore(reducers, initialStates, enhencers, sagaOptions): enhancedStore

• Component: React.Component - React component for binding redux.

• state: object - Initial state of bundle.

• actions: object - Same as redux's actions, connected with redux when component be mounted.

• saga: function* - Generator of redux-Ssga, initialize when component be mounted.

• propsPicker: function(stateDict, actionsDict) - Pick state and actions to props. $ is relative location symbol, $0 could get current location fast，and $1 will get parent location. If this option is unset, an default propsPicker will map all state entities to props with same key, actions will alse pass to props as actions.

Example

import state from "./state";
import saga from "./saga";
import * as actions from "./actions";
import Component from "./Component";

export default {
  Component,
  state,
  actions,
  propsPicker:({$0: state}, {$0: actions})=>({
    a: state.a,
    actions
  })
}

• options: object - Options of bundle.

  • reducerKey: string - Specify a fixed reducer key for bundle.

  • vReducerKey: string - Specify a fixed vitural reducer key for bundle.

  • isSceneAction: bool - If false, "_sceneReducerKey" will not add to actions in bundle.

  • isSceneReducer: bool - If false, reducer will accept actions dispatched by other bundle.

Tools API

bundleToComponent(bundle, extraProps)

A helper function of transforming bundle to react component.

bundleToElement(bundle, props, extraProps)

A helper function of transforming bundle to react element.

Saga API

bundleToComponent(bundle, extraProps)

getSceneState()

Get state of current scene.

Example

import { setSceneState, takeLatestSceneAction } from "redux-arena/effects";

function * doSomthing({ payload }){
  yield setSceneState({ payload })
}

export function* saga (){
  yield takeLatestSceneAction("DO_SOMETHING", doSomthing)
}

getSceneActions()

Get actions of current scene.

putSceneAction(action)

Put an action of current scene.

setSceneState(state)

Set state of current scene.

Example

import { setSceneState, getSceneState } from "redux-arena/effects";

function * doSomthing(){
  let { a } = yield getSceneState()
  yield setSceneState({ a : a+1 })
}

takeEverySceneAction(pattern, saga, ...args)

Take every scene action of pattern.

takeLatestSceneAction(pattern, saga, ..args)

Take latest scene action of pattern.

takeSceneAction(pattern)

Take scene action of pattern.