Redux CRUD
A specialized functional factory to construct elemental CRUD operation's facilities for Redux implementations.
Motivation
As most of Redux CRUD implementations created nowadays tend to follow certain specific conventions, this library looks forward to wrap most of the boilerplate code generally written into easy and ready-to-use factories to add into your project.
Table of contents
Code style
This project uses xo.js to follow general accepted conventions on code writing. For more information, look on the official XO.js repository site.
Features
- Compliance with basic Redux conventions
- Easy-to-use
- Flexible
- Configurable
Basic usage
To begin with, you will need to import the package:
;
This will give you access to the createReduxCrud
factory which, for ease of use and flexibility, has been written to be used in two different ways:
- As a Redux Manager Creator.
- As a Redux Utility Toolkit Factory.
Redux Manager Creator
As the most simple scenario, we use our main factory function to create a plain Redux Manager instance via a simple call:
// Create a Redux Managerconst reduxManager = ;
The Redux Manager consists of a secondary factory function that can create different Redux Utility Toolkits on demand:
// The Redux Manager can be used to create utilities for a Redux 'animals' storeconst animalsReduxUtilities = ;const plantsReduxUtilities = ;
Each of the now created Redux Utilities objects will contain the tools to construct your Redux Store architecture:
// Each Redux Utilities object will contain tools as:const reducers actionCreators actionTypes selectors thunks = animalsReduxUtilities;
As for how to use the tools, please refer to [Redux Utilities Toolkit] on the API references.
Redux Utility Toolkit Factory
As other approach to use the main core factory, it is also possible to pass an options
object onto it to automatically create a Redux Utilities object. This type of usage is to be referred as a Redux Utility Toolkit Factory
:
; // Pass an options object with an 'entityName' property:const animalsReduxUtilities = ;const reducers actionTypes actionCreators selectors thunks } = animalsReduxUtilities;
This method is quicker than the Redux Manager's way to setup, but creating a manager can also present useful on its own. For more information on this, please refer the examples.
API Reference
Redux CRUD Factory
- createReduxCrud(params)
A single factory function exported by default at the moment of import. This function will return different constructions depending on how parameters are passed onto it:
Argument | Type | Description | Returns |
---|---|---|---|
params | string |
This will create a Redux Manager instance using the passed string value as the entityName . |
Redux Manager instance |
object |
This can either create a Redux Utility Toolkit or a Redux Manager , if given or not respectively an entityName property with a non-falsy string type value. |
Redux Utility Toolkit/Redux Manager |
Redux Manager Instance
- reduxManager(entityName [, options])
A secondary factory function used to create one (or more) Redux Utility Toolkits by receiving a string
value via the entityName
parameter and an optional options
object that would contain settings for the specific created toolkit.
Argument | Type | Description |
---|---|---|
entityName | string |
Name of the entity type for the managed Redux store. |
options | object |
An OPTIONAL object containing settings to be used to modify the tools expected behavior. |
Redux Utility Toolkit
An object returned by either a Redux Manager or a Redux Utility Toolkit Factory that contains constructed tools to be used to create the Redux CRUD scheme. Here are listed the different types of tools:
Action Types
; const actionTypes = ;console // fruits/CREATE
An object containing the action types constants to be used by reducers
and action creators
. For more information into the chosen convention for these and their possible uses, refer to the action types guide.
Action Creators
; const actionCreators = ;console;// {// type: fruits/CREATE,// payload: { name: 'apple', color: 'red' }// }
An object containing action creator functions to easily construct actions for Redux dispatcher. For more information into the chosen convention for these and their usage, refer to the action creators guide.
Reducers
; const reducers = ;const entitiesReducers = reducers;const newState = ;console;// { 1: {id: 1, name: 'banana', color: 'yellow'} }
An object containing reducers for each segment of an Entity's Redux Store schema. For more information into the chosen convention for these and their usage, refer to the reducers guide.
Selectors
; const selectors = ;const allSelected byIdentifier = selectors;const state = fruits: entities: 1: id: 1 name: 'apple' color: 'red' 2: id: 2 name: 'pineapple' color: 'yellow' 3: id: 3 name: 'orange' color: 'orange' selectedIds: 1 network: isFetching: false error: null ; const createdByIdentifierSelector = ;console;// { id: 2, name: 'pineapple', color: 'yellow' } console;// [{ id: 1, name: 'apple', color: 'red' }]
An object containing basic selectors to ease the manipulation of the Redux State data. For more information into the chosen convention for these and their usage, refer to the selectors guide.
Thunks
const fetch = ; { return ;}
;; const thunks = ;const makeCreateThunk = thunks; const createFruitThunk = ;// ...Pass it with mapDispatchToProps to consume via Redux...
An object containing basic factories to construct quickly manageable CRUD thunks functions. For more information into the chosen convention for these and their usage, refer to the thunks guide.
Version release
To publish a new release, it would be necessary to:
- Be logged with an authorized account for the NPM repository.
- Make sure that all tests are passing properly.
To execute the process, run:
yarn release
Contribute
To request/present an issue, please follow the guidelines presented in the Contribution Guide.
Credits
This idea was developed based on a suggestion given by @rolilink.
License
MIT