@blueish9/redux-atom

    1.0.17 • Public • Published

    npm

    Redux Atom helps you encapsulate logic in one object, known as atom, which is the unit block that constructs a Redux application.

    Quick start

    1. Install with npm or yarn

    npm install --save @blueish9/redux-atom

    2. How to use

    Step-by-step tutorial: https://medium.com/@blueish/encapsulate-redux-logic-in-an-atom-1657161c8e16

    2.1. Create an atom

    Action type, action creator, action dispatching and reducer logic are all encapsulated in an atom.

    import {atom} from "@blueish9/redux-atom";
     
    const actionType = 'MY_ACTION_TYPE';
     
    // for each payload that you want the action to contain, define its name here 
    const actionParams = ['param1', 'param2', 'param3'];
     
    const reducerLogic = (state, action) => {
      // handle logic to return new state
    };
     
    const myAtom = atom(actionType, actionParams, reducerLogic);
    2.2. Create reducer
    const initialState = ...
     
    const atom1 = ...
    const atom2 = ...
     
    const reducer = createrReducer(initialState, atom1, atom2);
    2.3. Dispatch an action

    remember to register the middleware before you can invoke an atom to dispatch an action

    import {applyMiddleware, createStore} from "redux";
    import {createAtomMiddleware} from "@blueish9/redux-atom";
     
    const store = createStore(
        rootReducer,
        applyMiddleware(createAtomMiddleware)
    );
     
    // invoke atom to dispatch an action
    const myAtom = ...
    myAtom(...);
    2.4. Combine logic
    import {combine} from "@blueish9/redux-atom";
    const atom1 = ...
    const atom2 = ...
     
    // atom12 is a normal atom, we can use it to combine a bigger atom if needed
    const atom12 = combine('ACTION_TYPE_12', atom1, atom2);

    Keywords

    Install

    npm i @blueish9/redux-atom

    DownloadsWeekly Downloads

    1

    Version

    1.0.17

    License

    MIT

    Unpacked Size

    143 kB

    Total Files

    38

    Last publish

    Collaborators

    • avatar