npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

hops-redux

v15.2.1

Published

React and Redux implementation for Hops

Downloads

39

Readme

hops-redux

npm

Please see the main Hops Readme for general information and a Getting Started Guide.

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.

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

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

| Name | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | allowServerSideDataFetching | Boolean | true | no | Whether Hops is allowed to execute route-bound action creators during server-side rendering |

allowServerSideDataFetching

If you don't want Hops to execute route-bound action creators during server-side rendering, set this value to false.

Bear in mind, that setting this value to true on the other hand has no mandatory character. This means that there's no way to force Hops to execute server-side requests. As soon as there's a single Hops preset in place, that either sets the allowServerSideDataFetching-value to false or implements the canPrefetchOnServer-hook to return false, there won't be any server-side requests.

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 overridden by setting alwaysDispatchActionsOnClient to true).

Actions receive two parameters: params (see URL Parameters in the react-router docs) and an object containing location (the react router location object) and [match]((https://reacttraining.com/react-router/web/api/match).

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

Caution: Please be aware that the mixin hooks are not part of the SemVer API contract. This means that hook methods and signatures can change even in minor releases. Therefore it's up to you to make sure that all hooks that you are using in your own mixins still adhere to the new implementation after an upgrade of a Hops packages.

getReduxStore(): Store (override) runtime/browser/server

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

getReduxMiddlewares(): [middleware] (override) runtime/browser/server

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. Passes fetch implementation as extra argument to thunks.

Beware that middlewares passed as render option take precedence.

Example thunk-based action creator
// Object with fetch is passed as third parameter to thunks
const incrementFetch =
  () =>
  (dispatch, getState, { fetch }) => {
    return fetch('/api')
      .then((r) => r.json())
      .then(({ value }) => {
        dispatch({ type: 'INCREMENT', payload: value });
      });
  };

canPrefetchOnServer(): boolean (sequence) server

This is a hook that can be used to customize the behavior of when Hops can prefetch data during server-side rendering. E.g. execute route-bound action creators during initial render. If any function of this sequence returns false it prevents server fetching for this request.

By default it returns whatever is configured in the allowServerSideDataFetching preset option.

In case you need more control over the server-side rendering you can implement this method and provide your own implementation that decides if data should be prefetched during server-side rendering.