set

set(field: string) => function

  1. Creates a reducer for updating a field, if one does not exist, using a naming scheme based on the field name.
  2. Creates and returns a redux-action function.

The function returned by update accepts a DOM event as its default input. It will automatically grab the target.value from that event. However, you can pass in any value you want to the function. See the example below for more details.

Arguments

field: string: The field to update. This value will map to a field name on your state object. Reduxigen uses lodash/set under the hood, so it supports any valid lodash setter path string.

Returns

redux-action: A valid redux action function with a return value of the form: { type, payload }.

Example

// state
export default {
  pickup: "",
  nested: {
    value: ""
  },
  number: 22
};

// actions
import { set } from "reduxigen";

export const setPickup = set("pickup");
export const setNested = set("nested.value");
export const setNumber = set("number");


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

const Sample = ({setPickup, pickup, setNested, nested, number, setNumber}) =>
  <>
    <input
      name="pickup"
      onChange={setPickup}
      value={pickup}
    />
    <input
      name="nested-value"
      onChange={setNested}
      value={nested.value}
    />
    <span>{number}</span>
    <button onClick={setNumber(22)}>Reset number to 22</button>
  </>

const mapStateToProps = state => ({
  pickup: state.pickup,
  nested: state.nested,
  number: state.number
})

export default connect(mapStateToProps, actions)(Sample)

results matching ""

    No results matching ""