Duck State

Duck-state automatically caches and manages backend response into redux state.

No Action/Reducers Needed

Given a consistent backend, Ideally you will only ever need to write your query. Actions and reducers are handled automatically.

Installation

npm install duck-state

Core Concepts

Duck state is divided in two parts:

Extractor:

It reads backend response, and based on a pre-written schema - it extracts nested data into a flat structure, containing two-way mapping. Like this:

From

{
  animals: [
    {
      id: 0,
      legs: 2,
      cats: [
        {
          id: 0,
          name: 'Cat A'
        },
        {
          id: 1,
          name: 'Cat A'
        }
      ]
    }
  ]
}

To

{
  animals: {
    id: 0,
    legs: 2,
    cats: [
      {
        id: 0,
      },
      {
        id: 1,
      }
    ]
  },
  cats: [
    {
      id: 0,
      name: 'Cat A',
      animals: [{ id: 0 }]
    },
    {
      id: 1,
      name: 'Cat A',
      animals: [{ id: 0 }]
    }
  ]
}

Merger:

Data extracted from extractor gets merged in State on the basis of schema and actionType

Keys:

You send a key with your queries, which gets assigned to each object in extractedData. If an object is fetched by multiple queries, all keys will be added. If same queries are fetched again and some objects are not fetched in response, their keys will be removed. Once an Object has 0 key. It will be removed from state.

Setup

schema.js

const schema = {
  animals: {
    children: ['cats'],
    alias: ['animal', 'addToAnimal'],
    type: 'arrayOfObjects'
  },
  cats: {
    alias: ['cat'],
    type: 'arrayOfObjects'
  },
}

export default schema

duck.js

import State from 'duck-state'
import schema from './schema'
import graphqlLib from '../path/to/graphqlLib'

const duck = new State({
  schema,
  graphqlLib,
})

export default duck

store.js

import { combineReducers, createStor } from 'redux'
import duck from './duck'

export const rootReducer = combineReducers({
  data: duck.reducer
})

const store = createStore(
  rootReducer
)

duck.registerStore(store)

export default store

You should see something like this in your redux devtools:

[Insert Redux State screenshot here]

Writing a query

// Define
const fetchCats = duck.query({
  query: gql`{
    cats {
        id
        name
    }
  }
  `,
  variables: {
  },
  type: 'cats/fetch',
  key: 'cats'
})

// Call
await fetchCats()

API

State

new State({
    schema,
    customInitialState,
    graphqlLib,
}) -> duck

Arguments

schema

Defines root level state and their relationships

{
 [fieldName]: {
    children: ['childName'],
    aliasName: ['fieldNames'],
    type: oneOf('arrayOfObjects', 'object', 'element')
 }
}

fieldName: Name of the filed.

childName: Children field of fieldName.

type

• arrayOfObjects: Field is collection of objects. New items with different id's will be appended into collection. Objects with existing id's will be updated with new fields and values.
• object: Field is a single objects. New item with different id will replace existing state. Object with existing id will update with new fields and values.
• element: Field can be anything. It will be replaced every time.

customInitialState

Initial state is created based on the schema. It can be altered by passing object of fields to cutomInitialState

{
 [fieldName]: {
    ...rest
 }
}

fieldName: Name of the filed.

graphqlLib

const graphqlLib = (query, variable) => returns new Promise({})

duck

Methods

query: ({ query, variables, type, key, changeExtractedData, overrideAutoReducer }) -> function () { return new Promise() }

Arguments

query: GraphQL query.

variables: GraphQL query.

type: string -'{actionName}/${actionType}

• actionName: string

• actionType - oneOf('fetch' | 'add' | 'delete' | 'update')