2.6.6 • Published 1 year ago

fusion-plugin-react-redux v2.6.6

Weekly downloads
240
License
MIT
Repository
github
Last release
1 year ago

fusion-plugin-react-redux

Build status

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

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 {ReducerToken} 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 = () => Promise<State> | State

Service API

const service: ReduxServiceInstance = Redux.from((ctx: Context));
Types
type ReduxServiceInstance = {
  ctx: Context,
  store: Store,
  initStore: () => Promise<Store>
}
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 redux-action-emitter-enhancer for an usage example.


Redux devtools integration

The plugin automatically integrates with the redux devtools Chrome extension

2.6.6

1 year ago

2.6.5

1 year ago

2.6.4

1 year ago

2.6.1

1 year ago

2.6.0

1 year ago

2.6.3

1 year ago

2.6.2

1 year ago

2.5.2

2 years ago

2.5.1

2 years ago

2.5.0

2 years ago

2.4.3

2 years ago

2.4.2

2 years ago

2.4.5

2 years ago

2.4.4

2 years ago

2.4.1

2 years ago

2.4.0

2 years ago

2.3.4

2 years ago

2.3.5

2 years ago

2.3.2

2 years ago

2.3.3

2 years ago

2.3.1

2 years ago

2.3.0

3 years ago

2.2.8

3 years ago

2.2.7

3 years ago

2.2.6

3 years ago

2.2.5

3 years ago

2.2.4

3 years ago

2.2.3

3 years ago

2.2.2

3 years ago

2.2.1

4 years ago

2.2.0

4 years ago

2.1.4

4 years ago

2.1.3

4 years ago

2.1.2

4 years ago

2.1.1

4 years ago

2.1.0

4 years ago

2.0.9

4 years ago

2.0.8

4 years ago

2.0.7

4 years ago

2.0.6

5 years ago

2.0.5

5 years ago

2.0.4

5 years ago

2.0.3

5 years ago

2.0.2

5 years ago

2.0.1

5 years ago

2.0.0

5 years ago

1.1.2

5 years ago

1.1.2-0

5 years ago

1.1.1

5 years ago

1.1.1-2

5 years ago

1.1.1-1

5 years ago

1.1.1-0

5 years ago

1.1.0

5 years ago

1.0.11

5 years ago

1.0.10

6 years ago

1.0.9

6 years ago

1.0.8

6 years ago

1.0.7

6 years ago

1.0.6

6 years ago

1.0.5

6 years ago

1.0.5-0

6 years ago

1.0.4

6 years ago

1.0.3

6 years ago

1.0.2

6 years ago

1.0.1

6 years ago

1.0.0

6 years ago

0.3.0

6 years ago

0.2.3

6 years ago

0.2.2

6 years ago

0.2.1

6 years ago

0.2.0

6 years ago

0.1.13

6 years ago

0.1.12

6 years ago

0.1.11

6 years ago

0.1.10

7 years ago

0.1.8

7 years ago

0.1.4

7 years ago

0.1.3

7 years ago

0.1.2

7 years ago

0.1.1

7 years ago

0.1.0

7 years ago