fusion-plugin-react-redux

Integrates React and Redux to a Fusion.js application

It handles creating your store, wrapping your element tree in a provider, and serializing/deserializing your store between server and client.

Note that this plugin extends the Redux state with a property called ctx that references the request's context

Table of contents

• Installation
• Usage
• Setup
• API
  • Registration API
  • Dependencies
  • Service API
• Redux devtools integration

Installation

yarn add fusion-plugin-react-redux

Usage

// you can just use standard Redux reducers
export default (state, action) => ({
  count: countReducer(state.count, action),
  things: thingsReducer(state.things, action),
});

function countReducer(state, action) {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1;
    case 'DECREMENT':
      return state - 1;
    default:
      return state;
  }
}

function thingsReducer(state, action) {
  switch (action.type) {
    case 'ADD_THING':
      return [...state, action.payload];
    default:
      return state;
  }
}

Setup

// in your main.js file
import React from 'react';
import Redux, {
  ReduxToken,
  ReducerToken,
  EnhancerToken,
  GetInitialStateToken,
} from 'fusion-plugin-react-redux';
import ReduxActionEmitterEnhancer from 'fusion-plugin-redux-action-emitter-enhancer';
import App from 'fusion-react';
import reducer from './reducer';

export default function start() {
  const app = new App(root);
  app.register(ReduxToken, Redux);
  app.register(ReducerToken, reducer);
  app.register(EnhancerToken, enhancer);
  __NODE__ && app.register(GetInitialStateToken, async ctx => ({}));

  return app;
}

API

Registration API

Redux

import Redux from 'fusion-plugin-react-redux';

The Redux plugin. Provides the service API and installs a redux provider at the top of the React tree. Typically it's registered to ReduxToken

ReduxToken

import {ReduxToken} from 'fusion-plugin-react-redux';

Typically, it's registered with Redux

Dependencies

ReducerToken

import {ReducerToken} from 'fusion-plugin-react-redux';

The root reducer. Required.

Types

type Reducer = (state: any, action: Object) => any

EnhancerToken

import {EnhancerToken} from 'fusion-plugin-react-redux';

Redux enhancer. Optional.

Types

type Enhancer = (next: StoreCreator) => StoreCreator
type StoreCreator = (reducer: Reducer, preloadedState: State) => Store

GetInitialStateToken

import {GetInitialStateToken} from 'fusion-plugin-react-redux';

A function that gets initial state asynchronously without triggering actions. Optional. Useful for testing. When architecting application state, prefer using standard reducers to specify initial state.

Types

type InitialState = (ctx: Context) => Promise<State> | State

Service API

const service: ReduxServiceInstance = Redux.from((ctx: Context));

• ctx: Context - A Fusion.js context
• returns service:ReduxServiceInstance

Types

type ReduxServiceInstance = {
  ctx: Context,
  store: Store,
  initStore: () => Promise<Store>
}

• ctx: Context - A Fusion.js context
• store: Store - A Redux store
• initStore: () => Promise<Store> - calls the function provided by GetInitialStateToken

store.ctx

For convenience, Redux stores are composed with a default right-most enhancer to add store.ctx along side with other Store APIs. This is particular useful for your custom store enhancers to access to ctx for use-cases such as logging, analytics, etc.

See fusion-plugin-redux-action-emitter-enhancer for a usage example.

Redux devtools integration

The plugin automatically integrates with the redux devtools Chrome extension