Nuclear Powered Macros

    redux-thunks

    1.0.0 • Public • Published

    redux-thunks

    GitHub license Build Status Coverage npm Project Status

    Simple thunk creator for redux.

    This is meant to smooth over the use of redux-thunk and redux-actions.

    Installation

    $ yarn add redux-thunks redux-thunk
    

    or

    $ npm install --save redux-thunks redux-thunk
    

    Usage

    This module is simply syntactic sugar for using redux-thunk with redux-actions. As such, it requires that you use the redux-thunk middleware.

    Add redux-thunk middleware

    import { createStore, applyMiddleware } from 'redux';
    import thunk from 'redux-thunk';
    import rootReducer from './reducers/index';
     
    // Note: this API requires redux@>=3.1.0
    const store = createStore(
      rootReducer,
      applyMiddleware(thunk)
    );

    Action definition

    import { createAction, handleAction } from 'redux-actions';
    import { createThunk } from 'redux-thunks';
     
    export const setAmount = createAction('SET_AMOUNT');
     
    export const incrementAsync = createThunk('INCREMENT_ASYNC', ({ dispatch, getState }, amount) => {
      doAsyncMath(getState(), amount).then(val => dispatch(setAmount(val)));
    });
     
    // the reducer is attached to the action that is actually dispatched
    export default handleAction(setAmount, (state, payload) => payload, 0);

    The context also receives the type name that you gave the thunk, which is useful to using createAction inside of the handler function, so that the action type only needs to be defined once, like so:

    import { createAction, handleAction } from 'redux-actions';
    import { createThunk } from 'redux-thunks';
     
    export const resetAmountAsync = createThunk('RESET_AMOUNT', ({ dispatch, type }) => {
      // reset action. type is the value provided as the action type name, 'RESET_AMOUNT'
      const action = createAction(type);
     
      // read value from some async source and dispatch the reset action
      fetchAsyncValue().then(val => dispatch(action(val)));
    });
     
    // the reducer can use the exported thunk action directly
    export default handleAction(resetAmountAsync, (state, payload) => payload, 0);

    Use in component/container

    dispatch(incrementAsync, 10); // adds 10
    dispatch(resetAmountAsync); // resets the value

    API

    createThunk

    createThunk('type', ({ dispatch, getState, type }, [...args]))

    The syntax is very similar to that of createAction, and it smooths over the differences by similarly exposing a toString method on the thunk creator.

    createThunk takes two arguments, a type name, and a function to execute when the action is dispatched. The first argument of the function will be a context object, with the following properties:

    name description
    dispatch Provided directly from redux-thunk, used to dispatch other actions
    getState Provided directly from redux-thunk, used to reach the current state
    type The type name of the action that was passed in as the first argument

    Any additional arguments will be anything specified at the dispatch call site. It's expected that at least one other action will be dispatched from the handler function.

    License

    MIT © w33ble

    Keywords

    none

    Install

    npm i redux-thunks

    DownloadsWeekly Downloads

    1,710

    Version

    1.0.0

    License

    MIT

    Last publish

    Collaborators

    • w33ble