{"id":13511342,"url":"https://github.com/hapood/redux-arena","last_synced_at":"2025-04-14T22:17:51.848Z","repository":{"id":57350223,"uuid":"98965509","full_name":"hapood/redux-arena","owner":"hapood","description":"Bundling reducers, actions, saga and react-component when using Redux","archived":false,"fork":false,"pushed_at":"2017-12-20T09:28:41.000Z","size":4152,"stargazers_count":134,"open_issues_count":1,"forks_count":7,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-14T22:17:45.821Z","etag":null,"topics":["redux","redux-modules","redux-saga"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hapood.png","metadata":{"files":{"readme":"README.MD","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-08-01T06:04:50.000Z","updated_at":"2023-02-06T17:37:10.000Z","dependencies_parsed_at":"2022-08-28T20:21:43.546Z","dependency_job_id":null,"html_url":"https://github.com/hapood/redux-arena","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hapood%2Fredux-arena","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hapood%2Fredux-arena/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hapood%2Fredux-arena/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hapood%2Fredux-arena/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hapood","download_url":"https://codeload.github.com/hapood/redux-arena/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248968919,"owners_count":21191162,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["redux","redux-modules","redux-saga"],"created_at":"2024-08-01T03:00:47.858Z","updated_at":"2025-04-14T22:17:51.830Z","avatar_url":"https://github.com/hapood.png","language":"TypeScript","funding_links":[],"categories":["react"],"sub_categories":[],"readme":"# redux-arena\n\n[![Build Status](https://travis-ci.org/hapood/redux-arena.svg?branch=master)](https://travis-ci.org/hapood/redux-arena) \n[![Coverage Status](https://coveralls.io/repos/github/hapood/redux-arena/badge.svg?branch=master)](https://coveralls.io/github/hapood/redux-arena?branch=master)\n[![npm version](https://img.shields.io/npm/v/redux-arena.svg?style=flat-square)](https://www.npmjs.com/package/redux-arena)\n[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](CONTRIBUTING.md#pull-requests)\n\nRedux 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](https://github.com/reactjs/react-redux/issues/278).\n\n## Features\n\nRedux-Arena will export Redux/Redux-Saga code with React component as a high order component for reuse:\n1. When hoc is mounted, it will start Redux-Saga task, initializing reducer of component, and register node on state. \n2. When hoc is unmounted, it will cancel Redux-Saga task, destroy reducer of component, and delete node on state.\n3. Reducer of component will only accept actions dispatched by current component by default. Revert reducer to accept all actions by set options. \n4. 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.\n5. Like one-way data flow of Flux, child hoc could get state and actions of parent by vReducerKey.\n6. Integration deeply with Redux-Saga, accept actions dispatched by current component and set state of current component is more easily.\n\nIntegration with React-Router is included.\n\n## Install\n\n```\nnpm install redux-arena --save\n```\n\n## [Example](https://hapood.github.io/redux-arena/)\n\nA complete example is under `/example` directory, including a lot of HOC. And add redux-devtools for state changing show.\nOnline example can be found here: [Here](https://hapood.github.io/redux-arena/)\n\n### Screenshots\n\u003cimg src=\"https://raw.githubusercontent.com/hapood/redux-arena/d6c324d44636d19e7c2b824d295620053c73b1f6/redux-arena-demo.gif\" width=\"800\"/\u003e\n\n## Quick Start\n\n1. Export react component, actions, reducer, saga as React component.\n\n```javascript\nimport { bundleToComponent } from \"redux-arena/tools\";\nimport state from \"./state\";\nimport saga from \"./saga\";\nimport * as actions from \"./actions\";\nimport PageA from \"./PageA\";\n\nexport default bundleToComponent({\n  Component: PageA,\n  state,\n  saga,\n  actions\n})\n```\n\n2. Initial arenaStore and provide it for redux. PageA Component is exported in last step.\n\n```javascript\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { Provider } from \"react-redux\";\nimport { createArenaStore } from \"redux-arena\";\nimport PageA from \"./pageA\";\n\nlet store = createArenaStore();\n\nlet app = document.getElementById(\"app\");\nReactDOM.render(\n  \u003cProvider store={store}\u003e\n    \u003cPageA /\u003e\n  \u003c/Provider\u003e,\n  app\n);\n```\n\n# API Reference\n\n* [`EnhancedRedux API`](#enhancedredux-api)\n  * [`createArenaStore(reducers, initialStates, enhencers, sagaOptions): enhancedStore`](#createarenastorereducers-initialstates-enhancers-sagaoptions-enhancedstore)\n* [`Bundle API`](#bundle-api)\n* [`Tools API`](#tools-api)\n  * [`bundleToComponent(bundle, extraProps)`](#bundletocomponentbundle-extraProps)\n  * [`bundleToElement(bundle, props, extraProps)`](#asyncbundletoelementasyncbundle-props-extraProps)\n* [`Saga API`](#tools-api)\n  * [`getSceneState()`](#getscenestate)\n  * [`getSceneActions()`](#getsceneactions)\n  * [`putSceneAction(action)`](#putsceneactionaction)\n  * [`setSceneState(state)`](#setscenestatestate)\n  * [`takeEverySceneAction(pattern, saga, ...args)`](#takeeverysceneactionpattern-saga-args)\n  * [`takeLatestSceneAction(pattern, saga, ..args)`](#takelatestsceneactionpattern-saga-args)\n  * [`takeSceneAction(pattern)`](#takesceneactionpattern)\n\n## EnhancedRedux API\n\n### `createArenaStore(reducers, options): enhancedStore`\n\nCreates a enhanced redux store for redux-arena\n\n- `reducers: object` - A set of reducers.\n\n   **Example**\n   \n     ```javascript\n     {\n       frame: (state)=\u003estate,\n       page: (state)=\u003estate,\n       ...\n     }\n     ```\n\n- `options: object` - Options of redux arena store.\n\n  - `initialStates: object` - A set of initial states.\n   **Example**\n\n    ```javascript\n     {\n       frame: { location:\"/\" },\n       page: { cnt:0 },\n       ...\n     }\n    ```\n\n\n  - `enhencers: array` - An array of redux enhencers.\n\n    **Example**\n\n    ```javascript\n    import { applyMiddleware } from \"redux\";\n    import thunk from \"redux-thunk\";\n\n    let enhancers = [applyMiddleware(thunk)];\n    ```\n\n  - `sagaOptions：object` - Options used for redux-saga.\n\n  - `middlewares: array` - An array of redux middlewares.\n\n    **Example**\n\n    ```javascript\n    import thunk from \"redux-thunk\";\n\n    let middlewares = [thunk];\n    ```\n\n- `enhancedStore：object` - An enhanced redux store which owning following method.\n\n  - `runSaga(saga)` -  start a saga task.\n\n\n## Bundle API\n\nA Bundle is an object which contains react-component, actions, reducer, saga and options, used for ArenaScene high order component.\n\n**Example**\n\n```javascript\nimport state from \"./state\";\nimport saga from \"./saga\";\nimport * as actions from \"./actions\";\nimport Component from \"./Component\";\n\nexport default {\n  Component,\n  state,\n  saga,\n  actions,\n  options:{\n    vReducerkey:\"vKey1\"\n  }\n}\n```\n### `createArenaStore(reducers, initialStates, enhencers, sagaOptions): enhancedStore`\n\n- `Component: React.Component` - React component for binding redux.\n\n- `state: object` - Initial state of bundle.\n\n- `actions: object` - Same as redux's actions, connected with redux when component be mounted.\n\n- `saga: function*` - Generator of redux-Ssga, initialize when component be mounted.\n\n- `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.\n\n**Example**\n\n```javascript\nimport state from \"./state\";\nimport saga from \"./saga\";\nimport * as actions from \"./actions\";\nimport Component from \"./Component\";\n\nexport default {\n  Component,\n  state,\n  actions,\n  propsPicker:({$0: state}, {$0: actions})=\u003e({\n    a: state.a,\n    actions\n  })\n}\n```\n\n- `options: object` - Options of bundle.\n\n  - `reducerKey: string` - Specify a fixed reducer key for bundle.\n\n  - `vReducerKey: string` - Specify a fixed vitural reducer key for bundle.\n\n  - `isSceneAction: bool` - If false, \"_sceneReducerKey\" will not add to actions in bundle.\n\n  - `isSceneReducer: bool` - If false, reducer will accept actions dispatched by other bundle.\n\n## Tools API\n\n### `bundleToComponent(bundle, extraProps)`\n\nA helper function of transforming bundle to react component.\n\n### `bundleToElement(bundle, props, extraProps)`\n\nA helper function of transforming bundle to react element.\n\n## Saga API\n\n### `bundleToComponent(bundle, extraProps)`\n\n### `getSceneState()` \n\nGet state of current scene.\n\n**Example**\n\n```javascript\nimport { setSceneState, takeLatestSceneAction } from \"redux-arena/effects\";\n\nfunction * doSomthing({ payload }){\n  yield setSceneState({ payload })\n}\n\nexport function* saga (){\n  yield takeLatestSceneAction(\"DO_SOMETHING\", doSomthing)\n}\n```\n\n### `getSceneActions()`\n\nGet actions of current scene.\n\n### `putSceneAction(action)`\n\nPut an action of current scene.\n\n### `setSceneState(state)`\n\nSet state of current scene.\n\n**Example**\n\n```javascript\nimport { setSceneState, getSceneState } from \"redux-arena/effects\";\n\nfunction * doSomthing(){\n  let { a } = yield getSceneState()\n  yield setSceneState({ a : a+1 })\n}\n```\n\n### `takeEverySceneAction(pattern, saga, ...args)`\n\nTake every scene action of pattern.\n\n### `takeLatestSceneAction(pattern, saga, ..args)`\n\nTake latest scene action of pattern.\n\n### `takeSceneAction(pattern)`\n\nTake scene action of pattern.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhapood%2Fredux-arena","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhapood%2Fredux-arena","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhapood%2Fredux-arena/lists"}