Misk Simple Redux

Using Redux can be simple.

@misk/SimpleRedux includes all the Redux parts necessary for forms, network requests, and other interactive components. Don't write Redux boilerplate for basic interactivity again.

Getting Started

$ npm install @misk/simpleredux

SimpleSelector

simpleSelectorGet

  • Allows for single-key cached selection from Redux state

  • Most directly equivalent to deprecated simpleSelect

    // OLD
    const field1 = simpleSelect(props.simpleForm, "Dino::Field1", "data")
    const tagsField = simpleSelect(props.simpleForm, "Dino::Tags", "data", simpleType.array)
    
    // NEW
    const field1 = simpleSelectorGet(props.simpleForm, ["Dino::Field1", "data"])
    const tagsField = simpleSelectorGet(props.simpleForm, ["Dino::Tags", "data"], [])
    
  • simpleSelectorGet

    • subState: same as parameter 1 for simpleSelect. Example: props.simpleForm, props.simpleNetwork
    • path: allows any length path to an object key you'd like to access. This combines parameter 2 and 3 of simpleSelect.
      • Examples: "Dino::Name.data", ["Dino::Price", "data"]
      • Same as parameter in Lodash/Get
    • defaultValue? is optional and allows setting of a default value if the requested path is not found.
      • Examples: false, [], {}
      • This is useful for cases like storing a list of tags where the UI expects an empty array [] in the case of no elements, not undefined.
      • Same as parameter in Lodash/Get

simpleSelectorPick

  • Allows for multi-key cached selection from Redux state

    // OLD
    const fields = [
      "Name",
      "Price",
      "Itemized Receipt",
      "CheckAlice",
      "CheckBob",
      "CheckEve",
      "CheckMallory",
      "CheckTrent",
      "Meal",
      "Tags"
    ].map((f: string) => `Dino::${f}`)
    const fieldsData = fields
      .map((key: string) => {
        const value = simpleSelect(props.simpleForm, key, "data")
        return { [key]: value }
      })
      .reduce((prev, current) => ({...prev, ...current}), {})
    
    // New
    const fields = [
      "Name",
      "Price",
      "Itemized Receipt",
      "CheckAlice",
      "CheckBob",
      "CheckEve",
      "CheckMallory",
      "CheckTrent",
      "Meal",
      "Tags"
    ].map((f: string) => `Dino::${f}.data`)
    const fieldsData = simpleSelectorPick(props.simpleForm, fields)
    
  • simpleSelectorPick

    • subState: same as parameter 1 for simpleSelect.
      • Example: props.simpleForm, props.simpleNetwork
    • paths: array of paths of keys to return from object.
      • Example: ["Dino::Name.data", "Dino::Price.data"]
      • Same as parameter in Lodash/Pick

Resources

DEPRECATED: SimpleForm

A standardized set of form and input handler Redux-Sagas parts (actions, dispatcher, handlers, sagas, reducers, state interface)

DEPRECATED: SimpleNetwork

A standardized set of Axios based request Redux-Sagas parts (actions, dispatcher, handlers, sagas, reducers, state interface)

Releasing

Changelog (and Breaking Changes)