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,
},
}),
],
});