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`

This is a preset for Hops that can be used to add redux support to your Hops project.

Installation

This preset must be used together with the hops-react preset.

Just add this preset and its peer dependencies react-redux, redux and redux-thunk to your existing Hops React project:

$ yarn add hops-redux react-redux redux redux-thunk
# OR npm install --save hops-redux react-redux redux redux-thunk

If you don't already have an existing Hops project read this section on how to set up your first Hops project.

Usage

In order to use Redux in your application install the plugin and configure your reducers via render options.

Check out this integration test as an example for how to use this preset.

Configuration

Preset Options

This preset has no preset configuration options.

Render Options

This preset has only a single runtime option which can be passed to the render() options inside the redux key (see example above).

Name	Type	Default	Required	Description
`redux.reducers`	`Object`	`{}`	yes	An object whose values consists of all your reducer functions.
`redux.middlewares`	`Array`	`[ReduxThunkMiddleware]`	no	An array of all redux middleware you want to use.
`redux.actionCreators`	`Array`	`[]`	no	An array of route-bound action creators to be dispatched when the current route matches.
`redux.alwaysDispatchActionsOnClient`	`boolean`	`undefined`	no	When using server side rendering the route-matching actions will be dispatched on the server only - pass `true` to also dispatch these actions on the client again.

`reducers`

An object with key/value pairs of namespaces and reducer functions which will shape your state tree. This will be used with the combineReducers function.

const reducers = {
  counter: function(state, action) {
    return action.type === 'increment' ? state + action.payload : state;
  },
};
export default render(<MyApp />, { redux: { reducers } });

`middlewares`

You can configure any redux middleware you may want to use - by default this preset will include the redux-thunk middleware.

import logger from 'redux-logger';
import thunk from 'redux-thunk';
export default render(<MyApp />, { redux: { middlewares: [logger, thunk] } });

`actionCreators`

In order to dispatch actions based on the currently matching route you can specify a list of actions for matching urls.

These objects have the same properties as the <Route /> component and an additional action key with which the action that is to be dispatched can be specified.

When server-side rendering/data fetching is enabled, this will dispatch matching actions on the server and prefill the store for client-side.

On the client-side by default this will dispatch matching actions only on client-side navigation (can be overriden by setting alwaysDispatchActionsOnClient to true).

export default render(<MyApp />, {
  redux: {
    actionCreators: [
      {
        path: '/users',
        exact: true,
        strict: true,
        action: fetchUsers,
      },
      {
        path: '/users/:id',
        action: fetchUser,
      },
    ],
  },
});

`alwaysDispatchActionsOnClient`

Use this option to control whether you want to dispatch matching actions on the client-side again after they have already been dispatched on the server.

export default render(<MyApp />, {
  redux: {
    actionCreators: [...],
    alwaysDispatchActionsOnClient: true,
  },
});

Mixin Hooks API

`getReduxStore(): Store` (override)

Use this method in your own mixins to get a reference to the currently used Redux Store instance.

`getReduxMiddlewares(): [middleware]` (override)

Allows to specify your own set of redux middlewares. Useful when middlewares need access to the current request object, which only exists in the mixin context.

Beware that middlewares passed as render option take precedence.

hops-redux