Middlewares and Reducers for Redux

Motivation

Once you're required to fetch data from the server in your Redux applications, you need to either write a custom Middleware or use redux-* modules to fetch data. Anyway you need to implement actions creators, reducers or both. If your server provides rest api for data manipulation the implementation of anything becomes boring very quickly. And Redux-redents to the rescue!!!

The module contains the implementation of the:

1. Promise middleware, supports fetching from and pulling to server data
2. Chain middleware, supports call chains for chaining you actions.
3. Dictionary reducers, provide convention based reducers to reduce server responses

You don't need to implement actions, just add reducers to the rootreducer and add middlewares to the store

Installation

1npm install redux-redents

Quick sample

1//file index.js
2//imports
3import {createStore, applyMiddlware} from 'redux';
4import {Provider} from 'react-redux';
5import {render} from 'react-dom';
6import {dictionary_reducers,promiseMiddleware,chainMiddleware,createEntityOperation} from 'redux-redents';
7import {Plants} from './plants';
8
9//specify entities
10const plants = {
11  fruit: {},
12  vegetable: {}
13}
14const EntConfig = {
15  defaults : {
16    baseUrl : 'http://server/uri'
17  }
18  entities : plants
19}
20
21//create reducers
22const dicts = dictionary_reducers(plants);
23//create store
24const store = applyMiddlware(promiseMiddleware,chainMiddleware)(createStore)(dicts);
25
26render(<Provider store={store})><Plants/></Provider>,document.getElemenentById('app'));
27
28//file plants.js
29
30
31export class Plants extends Component {
32  static propTypes = {
33    plants: propTypes.array.isRequired,
34    plant: propTypes.object.isRequired
35  }
36  componentDidMount() {
37    this.props.actions.entOper('fruit','index'); //load fruits list
38    this.props.actions.entOper('fruit','get','apple'); //load an apple
39  }
40  return (
41    <div>
42      <ul>
43        {this.props.plants.map((cur) => <li>{cur.name}</li>)} //display list of the plants
44      </ul>
45      <h3>{this.props.plant.name}</h3>//diplay selected plant
46    <div>
47  );
48}
49
50//connect props and actions to the Component
51function mapStateToProps(state) {
52  return {
53    plants: state.fruits, //connect fruits reducer to the plants property
54    plant: state.fruit
55  };
56}
57
58function mapDispatchToProps(dispatch) {
59  return {
60    actions: bindActionCreators({entOper:createEntityOperation(EntConfig)}, dispatch) //binds actions.entOper to the call of the entityOperation function
61  };
62}
63
64export default connect(
65  mapStateToProps,
66  mapDispatchToProps
67)(GenTransactionsPage);

Full sample is available in the client-demo folder

Conventions and defaults

Redux-redents uses Entities object to get information about entities names, operations supported and their data.

Entities configuration by conventions

Entities type structure:

1entities = {
2  defaults: {
3    baseUrl: //default baseUrl of the server endpoint
4  },
5  entities : {
6    entityName : {
7      operation1: {
8        url: //operation url,
9        request: function(data) {return request object} //- function to produce request to perform operation1
10      }
11    }
12  }
13}

Default operations supported are:

• index - fetches the arrays of Entities.
  • By convention uses the url entities.defaults.baseUrl+"/"+entityName+"s"
  • By convention uses the get method
• get - fetches one entity
  • By convention uses the url entities.defaults.baseUrl+"/"+entityName+"s"+"/"+data data is passed from the client code
  • By convention uses the get method
• post - saves the entity data to the server
  • By convention uses the url entities.defaults.baseUrl+"/"+entityName+"s"
  • By convention uses the post method
  • By convention passes the data as the json body
• delete - removes the entity from the server
  • By convention uses the url entities.defaults.baseUrl+"/"+entityName+"s"
  • By convention uses the delete method

You can override an operation and inside the operation you could override either the url, or the request. The request field of the entity object should be the function:

1function(data) { return promise}

It accepts data from the client code and returns promise that returns the result

Reducers by default

Redux-redents has the function that accepts Entities configuration and generates reducers for index and get operations for each entity mentioned in the configuration.

1dictionary_reducers({ent1:{},ent2{}})
2produces
3{
4  ent1 : function(state,action), //get ent1
5  ent1s : function(state,action), //index ent1
6  ent2 : function(state,action), //get ent2
7  ent2s : function(state,action), //index ent2
8}

Actions creator for promises

To emit actions that will fetch data from the server Redux-redents contains the entityOperation function javascript function entityOperation(entity,operation,data,chainlink)

• entity - entity name to operate on
• operation - operation name to perform
• data - optional data required for operations. By convention data is used for
  • 'get' - will be added to the url as url/id
  • 'post' - will be sent as request body
  • 'delete' - will be added to the url as url/id
• chainlink - optional action to perform after the current action will be finished. Action is the function that accepts the current action.res or whole action if its .res field is not defined

Promise Middleware

Promise Middleware accepts actions with promise dispatches original action with modified type (type+'_REQUEST') and adds promise callbacks that emit original actions with response from the server in the res field.

Chain Middleware

If you need emit an action after another will be returned data from the server, you could use the chainlink parameter of the entityOperation. The chainlink is the function that accepts one parameter.

• chainMiddleware only calls the function if original action has status field equal to 'done' (action.status=='done'). * chainMiddleware passes server response (action.res) to that function or original action if it doesn't have res field