asyncUpdate

asyncUpdate(name: string, asyncOp: async function[,func: function, fetchMethod: string]) => thunk

The asyncOp can be any async function, e.g., a call to fetch, or axios, or flavor-of-the-month. If you're using a fetch, method other than json , you need to provide what type of data you are fetching (e.g., blob).

By default, asyncUpdate applies the identity function to the data returned from the asyncOp. In most cases, you will want to provide your own implementation of the data mapping function.

asyncUpdate does the following:

1. Dispatches an isLoading action, which uses update to dynamically add a loading property to your state associated with the field to update. This property has the form: {field_name}_LOADING. It is a Boolean property set to the appropriate loading state.
2. Dispatches a hasError action, which uses update to dynamicaly add an error property to your state associated with the field to update. This property has the form: {field_name}_ERROR. It is a Boolean property set to the appropriate error state.
3. If the data loads from the resource, then the loading state is updated to false, and anaction is dispatched with the returned value.
4. If there is an error, then the error state is updated with the error returned.

Arguments

1. field: string: The field to update. Reduxigen supports uses lodash/set under the hood, so it supports dot-delimited field identifier strings.
2. asyncOp: async function: Any kind of async function is supported (fetch, axios, etc).
3. func:: Optional. A data mapping function that will be applied to the value passed to the reducer. The data mapping function should always return an object. By default, Reduxigen applies the identity function as the data mapping function. Note that this function can have access to the previous state via injection into the passed in function. Simply pass in state as the second method parameter: (value, state) => {}.
4. fetchMethod: string:Optional. If you're using fetch, supply the response data method you want to use. For example:json, blob, etc.

Returns

thunk: A redux thunk.

Example

import { asyncUpdate } from "reduxigen";
import axios from "axios";

export const withdrawal = asyncUpdate(
  "withdraw",
  (value, state) => {
     const balance = state.balance - value;
     const availableBalance = balance - state.pending;
     return {
        balance,
        availableBalance,
        message: availableBalance < balance ? 'Your account will soon be overdrafted.' : ''
     }
  },
  event => {
    const resourceId = event.target.value;
    return axios.put(`/account/${resourceId}`);
  }})
);


// example use
import React, { Component } from "react";
import * as actions from "./actions";
import { connect } from "react-redux";

class TransactionList extends Component {

  makeWithdrawal = amount => this.props.this.props.withdrawal(amount);

  render() {
    return (
      <div>
       { showTransactionList(this.props) }
      </div>
      <input type="number" onChange={setWithdrawal} />
      <button onClick={this.makeWithdrawal}>Make withdrawal</button>
    )
  }
}

const mapStateToProps = state => ({
  balance: state.balance,
  availableBalance: state.availableBalance,
  message: state.message
})

export default connect(mapStateToProps, actions)(TransactionList);