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 calledmainSchema
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 }), });
-
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 componentprops.localDispatch
which 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 instate.async.<FETCH_ACTION>
and will either betrue
if the action is currently fetching or a falsey value otherwise.<FETCH_ACTION>
refers to the name (string) of the fetch action, such asUSER_GET_FETCH
. Error state is kept instate.async.<ERROR_ACTION>
and will either be an error like{status: <status code>, message: <message>}
, ornull
otherwise.<ERROR_ACTION>
refers to the name (string) of the error action, such asUSER_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
callsideEffect
then dispatchrecieveAction
catch dispatcherrorAction
-
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. |
function
LocalStateHock ⇒ 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.localDispatch
which 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 |
function
PropChangeHock ⇒ 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 |
reducer
RequestStateReducer : 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.
function
entityQuery(sideEffect) ⇒ 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 |
array
createRequestActionSet(actionMap) ⇒ 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 |
object
selectEntity(state, resultKey, [schemaKey]) ⇒ 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" |
object
selectEntityByPath(state, path, [schemaKey]) ⇒ 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" |
object
selectRequestState(state, actions) ⇒ 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 |