Package Exports

hops-redux

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (hops-redux) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Hops Redux

hops-redux extends hops-react by providing a rendering context injecting a Redux Provider and some helpers.

Additionally, hops-redux registers the Thunk middleware and supports Redux DevTools out of the box.

Installation

To use hops-redux, you need to add it and its dependencies to an existing project that already has hops-react installed.

npm install --save hops-redux react react-redux redux redux-thunk

API

`reduxExtension(config)`

reduxExtension() is hops-redux's main export. It is used as an extension to hops-react's render function. It accepts following options:

Field	Type	Default	Description
reducers	Object	`{}`	object literal containing reducers to be passed to Redux's `combineReducers()`
middlewares	Array	`[ReduxThunkMiddleware]`	array specifying the redux middlewares to apply. Uses redux-thunk as default. When middlewares is specified redux-thunk will not be included by default and needs to be added as well if needed.

`createContext(options)`

createContext() is hops-redux's advanced export. Additional to the config options of hops-react's createContext it takes additional reducers and middlewares as described above under reduxExtension(config). Be careful, in this case you have to wrap the config options under the redux namespace.

createContext({
    redux {
      reducers: {
        [namespace]: (state = { message: 'Hello World!' }) => state,
      }
    }
  })

`ReduxContext`

This constructor function is an advanced API feature, meant to help you build your own context factory functions. For more info, please read up on hops-react render contexts.

Example

import React from 'react';
import { connect } from 'react-redux';

import { render } from 'hops-react';
import { reduxExtension } from 'hops-redux';

const namespace = 'foo';

const withMessage = connect(state => state[namespace]);

const App = withMessage(props => <h1>{props.message}</h1>);

export default render(<App />, {
  extensions: [
    reduxExtension({
      reducers: {
        [namespace]: (state = { message: 'Hello World!' }) => state,
      },
    }),
  ],
});