Need help with redux-arena?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

130 Stars 8 Forks Apache License 2.0 191 Commits 1 Opened issues


Bundling reducers, actions, saga and react-component when using Redux

Services available


Need anything else?

Contributors list

# 420,343
41 commits
# 730,232
1 commit


Build Status Coverage Status npm version PRs Welcome

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.


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.


npm install redux-arena --save


A complete example is under

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


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 })

  1. 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( , app );

API Reference

EnhancedRedux API

createArenaStore(reducers, options): enhancedStore

Creates a enhanced redux store for redux-arena

  • reducers: object
    - A set of reducers.


   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.


    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.


    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.


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.


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)


Get state of current scene.


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

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

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


Get actions of current scene.


Put an action of current scene.


Set state of current scene.


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.


Take scene action of pattern.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.