Nuanced Pumpkin Mavens

    react-relax

    1.1.2 • Public • Published

    react-relax

    A minimal way of providing redux state to react components that doesn't use context

    Installation: npm install react-relax

    Meta

    • license: MIT

    globalStateProvider

    An instance of StateProvider for convenience

    Examples

    import { globalStateProvider } from 'react-relax';

    setStore

    Set the store and mount point for the default global StateProvider

    Parameters

    • store Redux.Store
    • mountPoint [string]

    Examples

    import { setStore } from 'react-relax';
    setStore(reduxStore, 'myFancyMountPoint');

    selectFromStore

    The globalStateProvider selectFromStore method

    Examples

    import { selectFromStore } from 'react-relax';
    selectFromStore({ language: 'viewer.language', name: 'user.name' });
    // > { language: 'en', name: 'Apathy Hives' };

    observe

    The globalStateProvider observe method

    Examples

    import { observe } from 'react-relax';
    const unsubscribe = observe(() => ({ stock: ['product', id, 'stockLevel'] }), ({ stock }) => {
      alert(`Stock level changed: ${stock}`);
    });
     
    // Later:
    unsubscribe();

    provideState

    The globalStateProvider provideState higher order component

    Examples

    import provideState from 'react-relax';
    function MyComponent({ userName, onChange }) {
      return (
        <label>
          Update username for {userId}: <input type="text" value={userName} onChange={onChange} />
        </label>
      );
    }
     
    const WrappedComponent = provideState(MyComponent, {
      within: (props) => ['users', props.userId],
      bindings: {
        userName: ['info.name'],
      },
      actions: {
        onChange: (event, props) => ({
          type: 'UPDATE_USER_NAME',
          userId: props.userId,
          name: event.target.value,
        }),
      },
    });
     
    React.render(<WrappedComponent userId="123" />);

    StateProvider

    The StateProvider class includes everything that the provideState function uses, scoped to a single redux store + mount point.

    With no mountPoint specified, your entire store state should be an Immutable.JS collection. When mountPoint is specified, we assume that your store state is a plain JS object, but that that key refers to an Immutable.JS collection.

    Parameters

    • store Redux.Store the redux store you want to use the state of
    • mountPoint [string] the key under the redux store you wish to use.

    Examples

    import { StateProvider } from 'react-relax';
    const stateProvider = new StateProvider(store, 'immutableMountPoint');
     
    function MyComponent({ name }) {
      return <span>User: {name}</span>;
    }
     
    export default stateProvider.provideState(MyComponent, {
      within: ({ userId }) => ['users', userId],
      bindings: {
        name: 'name',
      },
    });

    StateProvider.getState

    Get the immutable collection from the store backing this StateProvider, using the mountPoint if specified

    Returns Immutable.Collection

    StateProvider.selectFromStore

    Select props from store using a selectors object

    Parameters

    • selectors Object an object of prop names to selector paths
      • selectors.$name (string | Array | Immutable.Iterable)

    Examples

    stateProvider.selectFromStore({
      name: 'user.name',
      gender: ['user', 'gender'],
    });
    // > { name: 'Salsa', gender: 'Spiders' }

    Returns {$name: any} an object mapping the keys from selectors to values from the store

    StateProvider.observe

    Observe a set of selectors as the store changes

    Parameters

    • resolveSubscriptions {Function} - a function returning a set of selectors that can be passed to StateProvider.selectFromStore
    • onChange {Function} - called with the new values whenever they change. Although this uses Redux.Store.subscribe to handleChanges under the hood, onChange will only be called if the resolved values are different from their state in the previous store.

    Returns Function The unsubscribe function

    StateProvider.provideState

    A higher-order react component that provides state props into the wrapped component

    Parameters

    • Component React.Component the Component to wrap
    • options [Object] options detailing which props to provide and how to resolve them (optional, default {})
      • options.bindings [Object] an object mapping prop names to selectors for the store. When a function is provided, it will be called with props and should return a selector. (optional, default {})
      • options.within [(string | Array | Immutable.Iterable | Function)] Optionally scope all bindings to be beneath this selector (optional, default [])
      • options.actions [Object] An object mapping prop names to functions that return redux actions to be dispatched when they are called (optional, default {})

    Returns React.Component The wrapped component

    formatSelector

    Normalize a selector into an array or immutable iterable

    Parameters

    • selector (string | Array | Immutable.Iterable) The selector to normalise. If a string, sections should be seperated by dots.

    Examples

    import { formatSelector } from 'react-relax';
    formatSelector('todos.0.name');
    // > List('todos', '0', 'name');
    formatSelector(['icecreams', 'chocolate'])
    // > List('icecreams', 'chocolate')

    Returns Immutable.Iterable The exploded path for this selector

    joinSelectors

    Join several selectors into one selector

    Parameters

    • selectors ...(string | Array | Immutable.Iterable) the selectors to join

    Examples

    import { joinSelectors } from 'react-relax';
    joinSelectors('a.b', ['c', 'd'], List(['e', 'f']));
    // > List('a', 'b', 'c', 'd', 'e', 'f')

    Returns Any Immutable.List

    Install

    npm i react-relax

    DownloadsWeekly Downloads

    2

    Version

    1.1.2

    License

    MIT

    Last publish

    Collaborators

    • nikcorg
    • leemhenson
    • somehats