Negotiate Pushing Milestone

    react-unistore
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.4 • Public • Published

    npm

    react-unistore

    A 778b connector between React and unistore.

    unistore already has great support for connecting with React by itself. However at time of writing it does not have support for React Hooks. This package aims to provide this capability, extending the API with something close to Redux’s React Hooks API.

    Install

    $ yarn add unistore react-unistore
    # OR 
    $ npm install --save unistore react-unistore

    API

    Provider

    Provider exposes a store to context. Required for all other functions to work.

    Generally an entire application is wrapped in a single <Provider> at the root.

    export default () => (
      <Provider value={store}>
        <App />
      </Provider>
    );

    useAction

    Used to bind an action to the store.

    const setUsername = useAction((state, username) => ({
      user: { ...state.user, username },
    }));

    useSelector

    Used to extract values from the store.

    const user = useSelector(state => state.user);

    useStore

    Used to access the store itself. Where possible use useAction and useSelector rather than accessing the store directly.

    const store = useStore();

    connect

    Pre-hooks method of connecting to the store. See unistore docs for full details.

    Usage (TypeScript)

    Create your State. Whilst not necessary it can be helpful to wrap useSelector and useAction with your State: store.ts

    import {
      Provider,
      TypedUseAction,
      TypedUseSelector,
      useAction as _useAction,
      useSelector as _useSelector,
    } from "react-unistore";
     
    export interface State {
      user: {
        firstName?: string;
      };
    }
     
    export const useSelector: TypedUseSelector<State> = _useSelector;
    export const useAction: TypedUseAction<State> = _useAction;
     
    export { Provider };

    client.tsx

    import { createStore, Provider } from "react-unistore";
     
    const initialState = {
      user: {},
    };
     
    const store = createStore(initialState);
     
    ReactDOM.render(
      <Provider value={store}>
        <App />
      </Provider>,
      document.getElementById("root")
    );

    ChildComponent.tsx

    import { useAction, useSelector } from "./store";
     
    export default function ChildComponent() {
      const user = useSelector(state => state.user);
      const setFirstName = useAction((state, firstName: string) => ({
        user: { ...state, firstName },
      }));
      return (
        <div>
          <span>Hi {user.firstName || "you"}</span>
          <button onClick={() => setFirstName("Fred")}>Update</button>
        </div>
      );
    }

    Migrating from unistore/react

    If you are migrating from unistore/react to be able to use functionality available in this package you should find the API fully backwards compatiable. Simply^ change any imports from:

    import { Provider, connect } from "unistore/react";

    To:

    import { Provider, connect } from "react-unistore";

    ^ With one exception. To align with the standard React Context API patterns the Provider must be passed as the 'value' prop.

    export default () => (
    -  <Provider store={store}>
    +  <Provider value={store}>
        <App />
      </Provider>
    );

    Package Size of 778 Bytes

    Raw File Size (ES6 version): 3.51 KiB
    Raw File Size (ES5 version): 4.00 KiB
    Minified + Gzip (ES6 version): 778 Bytes
    Minified + Gzip (ES5 version): 864 Bytes
    

    Install

    npm i react-unistore

    DownloadsWeekly Downloads

    38

    Version

    0.0.4

    License

    MIT

    Unpacked Size

    26.7 kB

    Total Files

    15

    Last publish

    Collaborators

    • jahredhope