# redux-context

> A redux delegate object used to create store, render page, and integrate React-Router and more

Latest version **0.2.1** (published 2017-11-30) · MIT license · 0 weekly downloads

## Install

```sh
npm install redux-context
pnpm add redux-context
yarn add redux-context
bun add redux-context
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.1 |
| Published | 2017-11-30 |
| First published | 2017-06-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 9 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Zheng Can |
| Maintainers | canzheng |

## Links

- npm: https://www.npmjs.com/package/redux-context
- Repository: https://github.com/zhengcan/redux-context
- Homepage: https://github.com/zhengcan/redux-context#readme
- Issues: https://github.com/zhengcan/redux-context/issues
- npm.io page: https://npm.io/package/redux-context

## Dependencies (9)

- [redux](https://npm.io/package/redux.md) ^3.7.2
- [lodash](https://npm.io/package/lodash.md) ^4.17.4
- [prop-types](https://npm.io/package/prop-types.md) ^15.6.0
- [react-redux](https://npm.io/package/react-redux.md) ^5.0.6
- [redux-thunk](https://npm.io/package/redux-thunk.md) ^2.2.0
- [react-router](https://npm.io/package/react-router.md) ^4.2.0
- [redux-logger](https://npm.io/package/redux-logger.md) ^3.0.6
- [react-router-dom](https://npm.io/package/react-router-dom.md) ^4.2.2
- [react-router-redux](https://npm.io/package/react-router-redux.md) next

## Recent versions

- 0.2.1 (latest) — 2017-11-30
- 0.2.0-alpha04 (alpha) — 2017-10-17
- 0.2.0 — 2017-11-30
- 0.2.0-alpha03 — 2017-10-17
- 0.2.0-alpha02 — 2017-10-02
- 0.2.0-alpha01 — 2017-10-01
- 0.1.1 — 2017-07-10
- 0.1.1-alpha.1 — 2017-06-23
- 0.1.0-alpha.7 — 2017-06-22
- 0.1.0-alpha.6 — 2017-06-21
- 0.1.0-alpha.5 — 2017-06-21

## README

# redux-context

A redux delegate object used to create store, render page, and integrate React-Router and more.

[![Travis][build-badge]][build]
[![NPM version][npm-image]][npm-url]
[![Downloads][downloads-image]][npm-url]

## Motivate

It's really popular to integrate [React][react] with [React-Router][react-router], [Redux][redux] and related development tools.

Most likely, we'll need install the following packages:

```js
  yarn add react
  yarn add react-dom
  yarn add react-redux
  yarn add react-router
  yarn add react-router-dom
  yarn add react-router-redux
  yarn add redux
  yarn add redux-thunk
  yarn add -D react-hot-loader
  yarn add -D redux-devtools
  yarn add -D redux-devtools-dock-monitor
  yarn add -D redux-devtools-log-monitor
  yarn add -D redux-logger
```

And do a lot of work to integrate them well. It's so boring and complicated for me, especially there are several React projects need to be maintained.

This package extracts these works from my project, and provides a better API to accomplish all related works. 

## Installation

In your React app, install the following packages:

```js
  yarn add react
  yarn add react-dom
  yarn add redux-context
  yarn add -D react-hot-loader
  yarn add -D redux-devtools-extension
  yarn add -D redux-logger
```

### Why `redux-devtools-extension`?

`redux-devtools-extension` is built on the top of `redux-devtools`, and integrates several useful tools.

### Why `redux-logger`?

`redux-logger` will print the information of dispatched action of Redux. You may remove it if you don't like it.

## User Guide

In entry JavaScript, we could use `redux-context` to create [history][history] which is used by React-Router, initial Redux store, and render React component to DOM element.

```js
  import React from 'react';
  import ReduxContext from 'redux-context';
  import MyApp from './MyApp';
  import reducers from './reducers';

  let domElement = document.getElementById('page');
  let context = ReduxContext
    .forDOM(domElement)
    .configureStore(reducers)
    .render(MyApp);

  if (module.hot) {
    module.hot.accept('./reducers', () => {
      context.replaceReducer(require('./reducers').default);
    });
    module.hot.accept('./MyApp', () => {
      context.render(MyApp);
    });
  }
```

### API References

#### forDOM(domElement)

- If `domElement` is a DOM `Element` object, it will be used directly.
- If `domElement` is `String` object, it will be used to find the Element via `document.querySelector()`.
- If `domElement` is omitted, `redux-context` will try to find DOM Element which id is `page` or `root`. 

If a valid `domElement` is existed, `redux-context` will extract `data-*` attributes from it, and merge them with `window.pageProps`.
```js
  let defaultProps = Object.assign({}, dataAttrs, window.pageProps)
```

The `defaultProps` will be send to `ReactElement` which is used in `render()` as props.

#### createHistory(creator)

- `creator` is a callback function, used to create `history` object. It will receive `defaultProps` as argument.

In fact, there is no need to call `createHistory()` manually. `redux-context` will create a `browserHistory` for you as default.

#### configureStore(reducers, initialState = undefined)

- `reducers` is a plain object, which contains several reducer functions
- `initialState` is optional

#### render(ReactElement, props = undefined)

- `ReactElement` is a class or instance of React Component
- `props` will be merged with `defaultProps`, and inject `store` and `history`

#### replaceReducer(reducers)

- `reducers` is a plain object, which contains several reducer functions

### React Component tree

As result, `redux-context` will generate different following React Component trees for production mode and development mode. 

#### Production mode

```html
  <withRedux>
    <Provider>
      <ConnectedRouter>
        <Router>
          <MyApp />
        </Router>
      </ConnectedRouter>
    </Provider>
  </withRedux>
```

#### Development mode

```html
  <AppContainer>
    <withRedux>
      <Provider>
        <ConnectedRouter>
          <Router>
            <MyApp />
          </Router>
        </ConnectedRouter>
      </Provider>
    </withRedux>
  </AppContainer>
```

### Redux DevTools (and Extensions)

- For Chrome
	- from [Chrome Web Store](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd)
- For FireFox
	- from [Mozilla Add-ons](https://addons.mozilla.org/en-US/firefox/addon/remotedev/)

For more information, you may check the page of [redux-devtools-extension](https://github.com/zalmoxisus/redux-devtools-extension#installation).

[build-badge]: https://travis-ci.org/zhengcan/redux-context.svg?branch=master
[build]: https://travis-ci.org/zhengcan/redux-context
[downloads-image]: https://img.shields.io/npm/dm/redux-context.svg
[npm-image]: https://img.shields.io/npm/v/redux-context.svg
[npm-url]: https://www.npmjs.com/package/redux-context
[react]: https://github.com/facebook/react
[react-router]: https://github.com/ReactTraining/react-router
[redux]: https://github.com/reactjs/redux
[history]: https://github.com/reacttraining/history

---
_Source: https://npm.io/package/redux-context · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._