redux-blueflag

redux-blueflag

Redux Blue Flag is a complete Redux setup for asynchronous data calls that uses Normalizr schemas to handle all client side data management.

Benefits

export default entitiyQuery(props => `
    query {
        characters {
            name
            age
            race
        }
    }
`)(({characters}) => {
    return <ul>{characters.map(({name, age, race}, key) => {
        return <li key={key}>
            <div>{name}</div>
            <div>{age}</div>
            <div>{race}</div>
        </li>;
    })}</ul>
})

Install

npm install --save redux-blueflag

Index

• Creators
  • createEntityReducer
  • createEntityProvider????
  • createEntityQuery
  • createRequestAction
  • createRequestActionSet
  • createSchema ??
• Selectors
  • selectEntity
  • selectEntityByPath
  • selectRequestState
• Hocks (Higher Order Components)
  • PropChangeHock
  • LocalStateHock
• Misc
  • connectWithQuery
  • logRequestActionNames

Modules

createEntityReducer

Returns a reducer that normalizes data based on the [normalizr] schemas provided. When an action is fired, if the type matches one provied in schemaMap the payload is normalized based off the given schema. Takes a map of schemas where each key is an action name and value is a schema. must have at least one key called mainSchema returns a reducer that holds the main entity state.

import {createEntityReducer} from 'redux-blueflag';
import EntitySchema from 'myapp/EntitySchema';


export default combineReducers({
entity: createEntityReducer({
GRAPHQL_RECEIVE: EntitySchema,
MY_CUSTOM_ACTION_RECEIVE: EntitySchema.myCustomActionSceham
}),
});
export default combineReducers({
entity: createEntityReducer({
GRAPHQL_RECEIVE: EntitySchema,
MY_CUSTOM_ACTION_RECEIVE: EntitySchema.myCustomActionSceham
}),
});

LocalStateHock ⇒ function

LocalStateHock(reducer: function(state, action)) => function(component: Component) Wraps a component with a tiny implementation of the redux concept. Takes a reducer and returns a function ready to call with a component. The hock gives the component props.localDispatchwhich triggers the reducer. the return state of the reducer is then destructured on to the components as props.

PropChangeHock ⇒ function

PropChangeHock(propKeys: [String], sideEffect: function) => (component: Component) => Component

The prop change hock takes a side effect and an array of prop keys paths. The component then listens for component mount and receive props. If any of the provided props change the side effect is triggered.

RequestStateReducer : reducer

Keeps fetching and error state in a global redux property "async", which is an immutable.js Map It tracks state on actions ending with _FETCH, _ERROR or _RECEIVE Variables are uppercase snakes and match the consts for fetch and error XXX_FETCH is a boolean indicating if that action is currently requesting info (or undefined before any actions have been dispatched) XXX_ERROR is either { status, message } if an error has occured, or is null otherwise ^ really only useful for ensuring that a complete list of objects has been received when using ordered maps for collections. You won't know whether your list is complete or partial without this e.g. state.async.LEARNING_PLAN_FETCH

This listens to all actions and tracks the fetching and error states of all in a generic way. Async state data is kept under the async key in redux. Fetching state is kept in state.async.<FETCH_ACTION> and will either be true if the action is currently fetching or a falsey value otherwise. <FETCH_ACTION> refers to the name (string) of the fetch action, such as USER_GET_FETCH. Error state is kept in state.async.<ERROR_ACTION> and will either be an error like {status: <status code>, message: <message>}, or null otherwise. <ERROR_ACTION> refers to the name (string) of the error action, such as USER_GET_ERROR. Actions follow a strict naming convention, each ending in either _FETCH, _RECEIVE or _ERROR. This allows the AsyncStateReducer to listen to the various actions and keep track of async state.

Functions

entityQuery(sideEffect) ⇒ function

Takes an action creator and gives it a resultKey. wraps it in PropChangeHock, entitySelect and requestStateSelect

logRequestActionNames(actionMap, prefix)

Given the return value of creatRequestActionSet it will log the names of the created action types and creators

createRequestActionSet(actionMap) ⇒ array

returns a redux-thunk action creator that will dispatch the three states of our request action. dispatch fetchAction call sideEffect then dispatch recieveAction catch dispatch errorAction

selectEntity(state, resultKey, [schemaKey]) ⇒ object

The primary means of accessing entity state. Given a requestKey it will return the denormalized state object.

selectEntityByPath(state, path, [schemaKey]) ⇒ object

Given a path to entity state it will return the denormalized state. This function is only used when you are certain you need the exact id in entity state. Most often the request key is more appropriate.

selectRequestState(state, actions) ⇒ object

Returns the state of a current request. Either fetching, error or not yet requested.

createEntityReducer

Returns a reducer that normalizes data based on the normalizr schemas provided. When an action is fired, if the type matches one provied in schemaMap the payload is normalized based off the given schema. Takes a map of schemas where each key is an action name and value is a schema. must have at least one key called mainSchema returns a reducer that holds the main entity state.

import {createEntityReducer} from 'redux-blueflag';
import EntitySchema from 'myapp/EntitySchema';

export default combineReducers({
    entity: createEntityReducer({
        GRAPHQL_RECEIVE: EntitySchema,
        MY_CUSTOM_ACTION_RECEIVE: EntitySchema.myCustomActionSceham
    }),
});

Param	Type	Description
schemaMap	object	Map of schema action names.
constructor	function	constructor function to edit payload data before it is normalized.

LocalStateHock ⇒ function

LocalStateHock(reducer: function(state, action)) => function(component: Component) Wraps a component with a tiny implementation of the redux concept. Takes a reducer and returns a function ready to call with a component. The hock gives the component props.localDispatchwhich triggers the reducer. the return state of the reducer is then destructured on to the components as props.

Returns: function - componentCreator function to pass react component

Param	Type	Description
reducer	function	a function that acts as a local reducer

PropChangeHock ⇒ function

PropChangeHock(propKeys: [String], sideEffect: function) => (component: Component) => Component

The prop change hock takes a side effect and an array of prop keys paths. The component then listens for component mount and receive props. If any of the provided props change the side effect is triggered.

Returns: function - componentCreator function to pass react component

Param	Type	Description
propKeys	Array	list of strings of prop keys
outputFunction	function

RequestStateReducer : reducer

Keeps fetching and error state in a global redux property "async", which is an immutable.js Map It tracks state on actions ending with _FETCH, _ERROR or _RECEIVE Variables are uppercase snakes and match the consts for fetch and error XXX_FETCH is a boolean indicating if that action is currently requesting info (or undefined before any actions have been dispatched) XXX_ERROR is either { status, message } if an error has occured, or is null otherwise ^ really only useful for ensuring that a complete list of objects has been received when using ordered maps for collections. You won't know whether your list is complete or partial without this e.g. state.async.LEARNING_PLAN_FETCH

This listens to all actions and tracks the fetching and error states of all in a generic way. Async state data is kept under the async key in redux. Fetching state is kept in state.async.<FETCH_ACTION> and will either be true if the action is currently fetching or a falsey value otherwise. <FETCH_ACTION> refers to the name (string) of the fetch action, such as USER_GET_FETCH. Error state is kept in state.async.<ERROR_ACTION> and will either be an error like {status: <status code>, message: <message>}, or null otherwise. <ERROR_ACTION> refers to the name (string) of the error action, such as USER_GET_ERROR. Actions follow a strict naming convention, each ending in either _FETCH, _RECEIVE or _ERROR. This allows the AsyncStateReducer to listen to the various actions and keep track of async state.

entityQuery(sideEffect) ⇒ function

Takes an action creator and gives it a resultKey. wraps it in PropChangeHock, entitySelect and requestStateSelect

Kind: global function
Returns: function - action creator

Param	Type
sideEffect	function

logRequestActionNames(actionMap, prefix)

Given the return value of creatRequestActionSet it will log the names of the created action types and creators

Kind: global function

Param	Type	Description
actionMap	object	map of actions
prefix	string	String to prefix actions types with

createRequestActionSet(actionMap) ⇒ array

returns a redux-thunk action creator that will dispatch the three states of our request action. dispatch fetchAction call sideEffect then dispatch recieveAction catch dispatch errorAction

Kind: global function
Returns: array - list of action creators and action types

Param	Type	Description
actionMap	object	deep object representation of api functions

selectEntity(state, resultKey, [schemaKey]) ⇒ object

The primary means of accessing entity state. Given a requestKey it will return the denormalized state object.

Kind: global function
Returns: object - entity map

Param	Type	Default
state	object
resultKey	string
[schemaKey]	string	"mainSchema"

selectEntityByPath(state, path, [schemaKey]) ⇒ object

Given a path to entity state it will return the denormalized state. This function is only used when you are certain you need the exact id in entity state. Most often the request key is more appropriate.

Kind: global function
Returns: object - entity map

Param	Type	Default
state	object
path	array
[schemaKey]	string	"mainSchema"

selectRequestState(state, actions) ⇒ object

Returns the state of a current request. Either fetching, error or not yet requested.

Kind: global function
Returns: object - the curerent request state

Param	Type	Description
state	object	the current state
actions	string | array	either one or many partial action types