Negotiable Paleobotanist Missions

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

    0.2.1 • Public • Published

    ez-react-redux User Guide

    No...no...no🙅‍♂️🙅‍♀️, ez-react-redux is a bad pattern👎👎👎!

    You shouldn't use it in any productions.

    But it's a life saver in small projects.

    • No reducers(out of the box)
    • Immediately update your state any time any where without the hindrance of reducers
    • Get rid of immutable, immer is internally embeded
    • useSelector supported
    • No React Context

    And it also has the following features:

    • Support multiple store instances
    • Support redux ecosystem(like redux-logger)
    • Support Typescript
    • Very small size Bundle Size

    EZ at a Glance

    // Follow a property
    const count = useSelector(store, state => state.count);
     
    // Update a property
    store.dispatch({
      type: 'add',
      updater(state) {
        state.count += 1;
      },
    });

    Working example

    import { createStore, useSelector } from 'ez-react-redux';
     
    type State = {
      count: number;
    };
     
    const initialState: State = {
      count: 0,
    };
     
    const store = createStore<State>(initialState);
     
    function MyComponent() {
      const count = useSelector(store, state => state.count);
     
      function add() {
        store.dispatch({
          type: 'add',
          updater(state) {
            state.count += 1;
          },
        });
      }
     
      return (
        <div>
          <h1>{count}</h1>
          <button type="button" onClick={add}>
            +
          </button>
        </div>
      );
    }

    API Reference

    import { Action, StoreEnhancer, Store } from 'redux';
    /**
     * Updater is a function that describes how to update state.
     * @template S The type of the whole state
     */
    export declare type Updater<S = any> = (state: S) => void;
    /**
     * EZAction is the only action type for `ez-react-redux`
     * @template S The type of the whole state
     */
    export interface EZAction<S = any> extends Action {
      updater?: Updater<S>;
    }
    /**
     * Create the store instance
     * @template S The type of the whole state
     */
    export declare function createStore<S = any>(
      initialState: S,
      enhancer?: StoreEnhancer
    ): Store<S, EZAction<S>>;
    /**
     * Property selector
     * @template S The type of the whole state
     */
    export declare type Selector<S = any, T = unknown> = (state: S) => T;
    /**
     * Property selector for React hooks
     * @template S The type of the whole state
     * @template T The type of the selected property
     */
    export declare function useSelector<S = any, T = unknown>(
      store: Store<S>,
      selector: Selector<S, T>
    ): T;

    Install

    npm i ez-react-redux

    DownloadsWeekly Downloads

    1

    Version

    0.2.1

    License

    MIT

    Unpacked Size

    19.1 kB

    Total Files

    15

    Last publish

    Collaborators

    • liyuanqiu