Neato Polyester Material

    @onaio/cbv
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.1 • Public • Published

    Redux Class Based Views

    This package came out of the ideas expressed here.

    The objective is to make the process of connecting React components to the Redux store more DRY, and with less boilerplate.

    Currently, this package implements the following class based views:

    ObjectList

    ObjectList is a class based view that works with components that expect to receive an array of objects from the Redux store.

    How does it work?

    ObjectList is a generic class that is instantiated with two parameters:

    1. The component that you want to connect to the redux store
    2. The ObjectList options

    Sample usage

    import reducer, {
      Message,
      selectAllMessages,
      sendMessage,
      SendMessageAction
    } from 'some reducer module';
    
    // this is the component that wants to be connected to the Redux store
    const SomeComponent = (props: Props) => {
      const { messages } = props;
      const listItems = messages ? messages.map((e, index) => <li key={index}>{e.message}</li>) : null;
      return listItems ? <ul>{listItems}</ul> : <span>error</span>;
    };
    
    // these are options that ObjectList uses
    const objectListOptions = {
      actionCreator: sendMessage,
      dispatchPropName: 'actionCreator',
      returnPropName: 'messages',
      selector: selectAllMessages
    };
    
    // this is how you implement ObjectList
    const ClassBasedView = new ObjectList<Message, SendMessageAction, typeof selectAllMessages, Props>(
      SomeComponent,
      objectListOptions
    );
    
    // Voila!  This is a fully redux-connected version of SomeComponent
    const ConnectedSomeComponent = ClassBasedView.render();

    SingleObject

    SingleObject is a class based view that works with components that expect to receive a single of objects from the Redux store.

    How does it work?

    SingleObject is a generic class that is instantiated with two parameters:

    1. The component that you want to connect to the redux store
    2. The SingleObject options

    Sample usage

    import reducer, {
      Message,
      selectAllMessages,
      sendMessage,
      SendMessageAction
    } from 'some reducer module';
    
    const TheComponent = (props: Props) => {
      const { message } = props;
      return message ? <div>{message.message}</div> : <div>error</div>;
    };
    
    /** SingleObject options */
    const singleObjectOptions = {
      actionCreator: sendMessage,
      dispatchPropName: 'actionCreator',
      returnPropName: 'message',
      selector: selectOneMessage
    };
    
    // this is how you instantiate SingleObject
    const ClassBasedView = new SingleObject<
      Message,
      SendMessageAction,
      typeof selectOneMessage,
      TestProps
    >(TheComponent, singleObjectOptions);
    
    // Voila!  This is a fully redux-connected version of SomeComponent
    const ConnectedSomeComponent = ClassBasedView.render();

    Keywords

    none

    Install

    npm i @onaio/cbv

    DownloadsWeekly Downloads

    2

    Version

    0.0.1

    License

    Apache-2.0

    Unpacked Size

    29.8 kB

    Total Files

    12

    Last publish

    Collaborators

    • onaio