@nlabs/arkhamjs-middleware-redux
    TypeScript icon, indicating that this package has built-in type declarations

    3.22.0 • Public • Published

    @nlabs/arkhamjs-middleware-redux

    ArkhamJS Redux middleware integrates ArkhamJS into existing redux applications to provide access to ArkhamJS features and/or provide a simple migration path to ArkhamJS.

    npm version npm downloads Travis Issues TypeScript MIT license Chat

    Installation

    yarn add @nlabs/arkhamjs-middleware-redux

    Usage

    createArkhamStore

    Create a Redux store that creates a two-way binding with ArkhamJS.

    // Create Redux store
    const store = createArkhamStore({
      arkhamMiddleware,
      devTools,
      flux,
      reducers,
      reduxMiddleware,
      statePath
    });

    A quick example on usage.

    import {createArkhamStore} from '@nlabs/arkhamjs-middleware-redux';
    import {Flux} from '@nlabs/arkhamjs';
    import * as React from 'react';
    import {render} from 'react-dom';
    import {Provider} from 'react-redux';
    import {App} from './components/App';
    import {reducers} from './reducers';
    
    // Initialize ArkhamJS
    Flux.init({name: 'reduxTodos'});
    
    // Create Redux store
    const store = createArkhamStore({
      flux: Flux,
      reducers,
      statePath: 'todos'
    });
    
    // Render root component with store
    render(
      <Provider store={store}>
        <App />
      </Provider>,
      document.getElementById('root')
    );

    Options

    • flux - (Flux) The Flux object you initialized in your app.
    • reducers - (Reducer) Redux root reducer. The reducer created by combineReducers().
    • statePath - (string[] | string) State tree path where to set this branch of the store's state tree.
    • arkhamMiddleware - (any[]) (optional) ArkhamJS options. Use only if intending to initialize a new instance.
    • devTools - (boolean) (optional) Enable/disable Redux dev tools. Default: false.
    • reduxMiddleware - (Middleware[]) (optional) Redux middleware. Any additional Redux middleware used in the app.

    ReduxMiddleware

    ArkhamJS middleware to relay dispatched actions to Redux.

    // Create ArkhamJS middleware
    const reduxMiddleware = new ReduxMiddleware(store, name);

    A simple usage example:

    import {ReduxMiddleware} from '@nlabs/arkhamjs-middleware-redux';
    import {createStore} from 'redux';
    import {reducers} from './reducers';
    
    const store = createStore(reducers);
    const middleware = [new ReduxMiddleware(store, 'myApp')];
    
    Flux.init({middleware});
    • store - (Store) Redux root store. The store created by createStore().
    • name - (string) (optional) Middleware name. Should be unique if integrating with multiple Redux stores.

    arkhamMiddleware

    Redux middleware to relay Redux action dispatches to ArkhamJS.

    // Create Redux middleware
    const middleware = arkhamMiddleware(statePath);

    A simple usage example:

    import {arkhamMiddleware} from '@nlabs/arkhamjs-middleware-redux';
    import {applyMiddleware, createStore} from 'redux';
    import {reducers} from './reducers';
    
    const store = createStore(reducers, applyMiddleware(arkhamMiddleware('myApp')));
    • statePath - (string[] | string) State tree path where to set this branch of the store's state tree.

    Additional Documentation

    Additional details may be found in the ArkhamJS Documentation.

    Redux Todo example

    The following is a full example using the Todo example within the Redux repository. The middleware will be added using the Flux.addMiddleware() automatically via the createArkhamStore() function.

    import {Logger, LoggerDebugLevel} from '@nlabs/arkhamjs-middleware-logger';
    import {createArkhamStore} from '@nlabs/arkhamjs-middleware-redux';
    import {BrowserStorage} from '@nlabs/arkhamjs-storage-browser';
    import {Flux} from '@nlabs/arkhamjs';
    import * as React from 'react';
    import {render} from 'react-dom';
    import {Provider} from 'react-redux';
    import App from './components/App';
    import rootReducer from './reducers';
    
    // Add a console logger for Arkham (optional).
    const logger = new Logger({
      debugLevel: LoggerDebugLevel.DISPATCH
    });
    
    // Initialize ArkhamJS.
    const Flux.init({
      name: 'reduxDemo', // Optional name of application, defaults to 'arkhamjs'
      storage: new BrowserStorage(), // Optional persistent storage cache
      middleware: [logger] // Optional console logger
    });
    
    // Create an ArkhamJS store for Redux
    const store = createArkhamStore({
      flux: Flux,
      reducers: rootReducer,
      statePath: 'demo'
    });
    
    render(
      <Provider store={store}>
        <App />
      </Provider>,
      document.getElementById('root')
    );

    Install

    npm i @nlabs/arkhamjs-middleware-redux

    Homepage

    arkhamjs.io

    DownloadsWeekly Downloads

    54

    Version

    3.22.0

    License

    MIT

    Unpacked Size

    26 kB

    Total Files

    15

    Last publish

    Collaborators

    • nitrog7