Narwhals Playing Mahjong

    @ftw/redux-utils

    0.0.3 • Public • Published

    FTW Redux Utils

    State management utilities for Redux.

    ⚠️ Definitely a WIP ⚠️

    Operations

    The simplest Operation is just an action type and a reducer:

    import { createOperation } from '@ftw/redux-utils';
    
    const increment = createOperation({
      actionType: 'INCREMENT',
      reducer: state => state + 1
    });

    You can customize the action creator if you want:

    import { createOperation } from '@ftw/redux-utils';
    
    const increment = Operation({
      actionType: 'INCREMENT',
      actionCreator: amount => ({ payload: { amount } }),
      reducer: (state, action) => state + action.payload.amount
    });

    Asynchronous Operations

    Sometimes an Operation needs to handle some asynchronous logic (e.g. making a request to your API and then storing the response). This is almost as simple to write as a synchronous operation:

    import { createAsyncOperation } from '@ftw/redux-utils';
    
    const fetchArticles = createAsyncOperation({
      actionType: 'FETCH_ARTICLES',
      reducer: (state, action) => {
        switch (action.status) {
          case 'pending': {
            return {
              ...state,
              fetchStatus: 'pending'
            };
          }
    
          case 'success': {
            return {
              ...state,
              fetchStatus: 'success',
              articles: action.payload.data
            };
          }
    
          case 'error': {
            return {
              ...state,
              fetchStatus: 'error'
            };
          }
        }
    
        return state;
      },
      perform: () => axios.get('/api/articles').then(({ data }) => data)
    });

    Modules

    Operations can be composed into a Module. A Module contains the reducer, saga, action creators, and selectors for a specific "slice" of your application state.

    Here's a counter Module with an initial state of 0:

    import { createModule, createOperation } from '@ftw/redux-utils';
    
    const Counter = createModule({
      initialState: 0,
      operations: {
        increment: createOperation({
          actionType: 'INCREMENT',
          reducer: state => state + 1
        }),
        decrement: createOperation({
          actionType: 'DECREMENT',
          reducer: state => state - 1
        })
      },
      selectors: {
        getState: state => state
      }
    })('counter');

    The created module has the following API:

    Counter.reducer(state, action);
    Counter.saga();
    Counter.actions.increment();
    Counter.actions.decrement();
    Counter.selectors.getState(state);

    Keywords

    none

    Install

    npm i @ftw/redux-utils

    DownloadsWeekly Downloads

    4

    Version

    0.0.3

    License

    MIT

    Unpacked Size

    19.9 kB

    Total Files

    18

    Last publish

    Collaborators

    • anthonymattox
    • danmartens
    • joshhepworth