redux-partial
TypeScript icon, indicating that this package has built-in type declarations

0.1.1 • Public • Published

redux-partial

npm version

Library to work with a part of redux store as if it is a full-fledged store. You can subscribe to changes of a part of the state get access only to a part. All state change listeners will be invoked only if a particular part ot the state is changed. So it can highly improve performance of an application where there are many connected components.

Make a store partial

To work with a partial state you should use the makePartial method. It receive an origin redux store and return a store with the getPartial method.

import { createStore } from 'redux';
import { makePartial } from 'redux-partial';
import { createAssistantMiddleware } from 'reducer-assistant/redux';
 
const originalStore = createStore(/** parameters */);
 
const store = makePartial(originalStore);

To access to a partial store which contains only one field of the original store you should pass a field name to the getPartial method.

// Consider a store contains a field with name `user`
const userFieldStore = store.getPartial('user');

Now you can work with the userFieldStore as if it is a redux store which contains only data of a user.

You can use an object to select fields of the original state. Consider, an original state containes this data:

interface State {
    user: {
        name: string;
        email: string;
    };
    order: {
        items: OrderItem[];
        status: OrderStatus;
    };
}

You can get a partial store which contains only this part of data:

interface State {
    user: {
        email: string;
    };
    order: {
        status: OrderStatus;
    };
}

You should use this code to do that:

const partialStore = store.getPartial({
    user: { email: true },
    order: { status: true },
});

You can use a select parameter if you want to convert a data of the partial store to some other shape.

const partialStore = store.getPartial(
    {
        user: { email: true },
        order: { status: true },
    },
    {
        select: (state) => ({
            email: state.user.email,
            status: state.order.status,
        }),
    }
);

Now the partial store contains this type of data:

interface PartialState {
    email: string;
    status: OrderStatus;
}

You can use the reselect library to cache a result of the selector if you need it.

Work with a part of the state

A partial state contains all common methods of the redux store: getState, subscribe and dispatch, and also contains the getPartial method.

Package Sidebar

Install

npm i redux-partial

Weekly Downloads

1

Version

0.1.1

License

MIT

Unpacked Size

19.9 kB

Total Files

7

Last publish

Collaborators

  • megazazik