Catalyst Redux
State management utilities for Redux.
⚠️ Definitely a WIP ⚠️
Operations
The simplest Operation is just an action type and a reducer:
import createOperation from 'catalyst-redux'; const increment = ;
You can customize the action creator if you want:
import createOperation from 'catalyst-redux'; const increment = ;
Asynchronous Operations
Sometimes an Operation needs to handle some asynchronous logic (e.g. making a request to your API and then storing the response). This is almost as simple to write as a synchronous operation:
import createAsyncOperation from 'catalyst-redux'; const fetchArticles = ;
Modules
Operations can be composed into a Module. A Module contains the reducer, saga, action creators, and selectors for a specific "slice" of your application state.
Here's a counter Module with an initial state of 0
:
import createModule createOperation from 'catalyst-redux'; const Counter = 'counter';
The created module has the following API:
Counter;Counter;Counteractions;Counteractions;Counterselectors;
Resource Modules
Resource modules consist of a predefined group of operations and selectors which allow you to interact with a JSON API.
Resource modules require information about the types of resources you want to interact with and how to construct requests for them:
import ResourcesModule Resource relationships from 'catalyst-redux'; static type = 'posts'; static relationships = comments: relationships ; static type = 'comments'; static relationships = post: relationships ; const Resources = Post Comment;
This would provide you with the following API for interacting with posts and comments:
Resources;Resources;Resources;Resources;Resources; Resources;Resources;Resources;Resources;
In this case, the "resourceClass" argument could be either Post
or
Comment
.
Request Options
The requests made and responses received by a resource module can be transformed
by passing an options object to ResourcesModule
:
import ResourcesModule from 'catalyst-redux'; const Resources = // Resource classes { headers = ...headers Authorization: 'Bearer 1234567890' ; return data headers ; } { return ...data ; } ;
Actions
findAllAction(resourceClass: Class, ?options: Object)
Example:
Resources;
createAction(resourceClass: Class, attributes: Object, ?options: Object)
Example:
Resources;
updateAction(resourceClass: Class, resourceID: number | string, attributes: Object, ?options: Object)
Example:
Resourcesactions;
connectResource
HOC
The This
higher-order component
allows you to easily build components which can both create new resources and
update/destroy existing resources. The wrapped component (CommentForm
in the
following example), is passed these props by connectResource
:
resource: Object | null
resourceStatus: string | null
onCreate: (attributes: Object, options?: Object) => void
Dispatches an
action to create a resource using the passed attributes.
onUpdate: (attributes: Object, options?: Object) => void
Dispatches an
action to update the resource using the passed attributes.
onDestroy: () => void
Dispatches an action to destroy the resource.
import ResourcesModule Resource connectResource from 'catalyst-redux';import type ResourceProvidedProps from 'catalyst-redux'; static type = 'comments'; const Resources = Comment; type Props = ResourceProvidedProps; PureComponent<Props> state = content: '' ; { this; }; { event; thisprops; }; { return <form => <textarea = = /> <button>Add Comment</button> </form> ; } const ConnectedCommentForm = CommentForm;
connectResourceForm
HOC
The This HOC makes it easy to store temporary state for a resource's attributes
before the resource is created/updated. The wrapped component is passed these
props in addition to the ones provided by connectResource
:
onSave: (eventOrOptions?: SyntheticEvent<*> | Object = {}, options?: Object = {}) => void
Calls either onSave
or onCreate
depending on the state of
the resource. Optionally accepts an event as the first argument and calls
preventDefault
(which allows it to be used directly in a form's onSubmit
).
onReset: () => void
Clears the stored attribute values, effectively
resetting the form.
inputProps: (key: string) => { value: string, onChange: (event: SyntheticInputEvent<*>) => void }
Given the name of an attribute, it
returns an object with value
and onChange
props which can be spread onto an
<input />
, <select />
, etc.
import ResourcesModule Resource connectResourceForm from 'catalyst-redux';import type ResourceFormProvidedProps from 'catalyst-redux'; static type = 'posts'; const Resources = Post; type Props = ResourceFormProvidedProps; const PostForm = onSave onReset inputProps : Props return <form => <label ="title">Title</label> <input ="title" ="text" /> <label ="content">Content</label> <textarea ="content" /> <button ="submit">Save</button> <button ="button" => Reset </button> </form> ;; const ConnectedPostForm = PostForm;
The ConnectedPostForm
component can now be used to either create a new post:
<ConnectedPostForm />
or to edit an existing one:
<ConnectedPostForm = />