Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

piral-redux

0.11.7 • Public • Published

Piral Logo

Piral Redux · GitHub License npm version tested with jest Gitter Chat

This is a plugin that only has a peer dependency to piral-core. What piral-redux brings to the table is a set of Pilet API extensions that can be used with piral or piral-core for including a state container managed by Redux.

By default, these API extensions are not integrated in piral, so you'd need to add them to your Piral instance.

Documentation

The following functions are brought to the Pilet API.

createReduxStore()

Creates a new Redux store for the pilet. The store is tighly coupled to the lifetime of the pilet.

This function returns the connect function known from React Redux - just applied to the pilet store.

Usage

For authors of pilets

Use the function createReduxStore to obtain a store connector. The store connector is a higher-order component that wraps an existing component and removes the state and dispatch props. Instead, state will be "connected" to the created pilet store and dispatch allows modifying the state by calling the reducer with the provided action.

Let's see a full example.

export function setup(api: PiletApi) {
  const connect = api.createReduxStore(myReducer);
  // ...
}

The reducer could be defined such as:

const initialState = {
  count: 0
};
 
function myReducer(state = initialState, action) {
  switch (action.type) {
    case "increment":
      return {
        count: state.count + 1
      };
    case "decrement":
      return {
        count: state.count - 1
      };
    default:
      return state;
  }
}

Using this construct is straight forward and follows other create... Pilet APIs.

root.registerPage(
  "/sample",
  connect(({ state, dispatch }) => (
    <div>
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
      {state.count}
    </div>
  ))
);

Setup and Bootstrapping

For Piral instance developers

The provided library only brings API extensions for pilets to a Piral instance.

For the setup of the library itself you'll need to import createReduxApi from the piral-redux package.

import { createReduxApi } from 'piral-redux';

The integration looks like:

const instance = createInstance({
  // important part
  extendApi: [createReduxApi()],
  // ...
});

There are two options available. The reducer option allows us to define reducers that also access and manipulate the global state. The enhancer option allows us to pass in a custom store enhancer. For more details on enhancers please look at the Redux documentation.

License

Piral is released using the MIT license. For more information see the license file.

Install

npm i piral-redux

DownloadsWeekly Downloads

1,562

Version

0.11.7

License

MIT

Unpacked Size

19 kB

Total Files

16

Homepage

piral.io

Last publish

Collaborators

  • avatar