JSPM

hops-redux

7.0.0
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 12
  • Score
    100M100P100Q82127F
  • License MIT

React and Redux implementation for Hops

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

createContext(options)

createContext() is hops-redux's main export. Of course, it is based on the implementation in hops-react, but takes an additional reducers option.

Field Type Default Description
mountpoint String '#main' querySelector identifying the root DOM node
template Function defaultTemplate template function supporting all React Helmet and hops-react features
reducers Object {} object literal containing reducers to be passed to Redux's combineReducers()

Context(options)

Context() works the same way as createContext(), but with an object-oriented API. Additionally, you can use its Context.extend() method to build upon hops-redux and create advanced context implementations.

Example

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

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

const namespace = 'foo';

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

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

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