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
yarn add fusion-plugin-react-redux// 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; } }// 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; }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
import {ReduxToken} from 'fusion-plugin-react-redux';Typically, it's registered with Redux
import {ReducerToken} from 'fusion-plugin-react-redux';The root reducer. Required.
type Reducer = (state: any, action: Object) => any import {EnhancerToken} from 'fusion-plugin-react-redux';Redux enhancer. Optional.
type Enhancer = (next: StoreCreator) => StoreCreator type StoreCreator = (reducer: Reducer, preloadedState: State) => Store 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.
type InitialState = (ctx: Context) => Promise<State> | State const service: ReduxServiceInstance = Redux.from((ctx: Context));ctx: Context- A Fusion.js context- returns
service:ReduxServiceInstance
type ReduxServiceInstance = { ctx: Context, store: Store, initStore: () => Promise<Store> } ctx: Context- A Fusion.js contextstore: Store- A Redux storeinitStore: () => Promise<Store>- calls the function provided byGetInitialStateToken
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 a usage example.
The plugin automatically integrates with the redux devtools Chrome extension