Azat
Azat

Reputation: 23

Redux generic reducer

I have an application with many entities which are requested from API. I want to add a generic way to get any entity, because this way I won't need to create hundreds of files, also I can make some generic components (for example table that shows entity values) What would be the best practice to do that in redux or maybe there are some npm packages for that. To make it clear I'll present how I did it in flux:

my generic store:

var Api = require('../utils/api');
var Reflux = require('reflux');
var Actions = require('../actions');

module.exports = Reflux.createStore({
    listenables: [Actions],

    getEntities: function (entityName) {
        var url = "api/generic/" + entityName;

        return Api.get(url)
            .then(function (json) {
              this.triggerChange(entityName, json);
            }.bind(this));
    },
    triggerChange: function (entityName, json) {
        this.trigger('change', {entity: entityName, value: json});
    },

updateEntity: function (body, entityName) {
  var url = "api/generic/" + entityName + "/edit";
  return Api.post(url, body)
      .then(function (json) {
          this.getEntities(entityName);
      }.bind(this)).catch(this.getEntities(entityName));
},

deleteEntity: function (id, entityName) {
    var url = "api/generic/" + entityName + "/" + id;
    return Api.delete(url)
        .then(function (json) {
            this.getEntities(entityName);
        }.bind(this)).catch(this.getEntities(entityName));
  }

});
And my listener:
onChangeEntities: function (event, result) {
    if (event == "change"){
      var entityName = result.entity;
      var setState = this.setState;
      var dataContext = this.state.dataContext;
      var arr = [];
      dataContext.map(function (element) {
         arr.push(element);
      });
      var state = this.state;
      Entities.map(function (entity) {
         if (entity.name == entityName)
         {
             if (dataContext.filter(function (entity) {
                     return entity.entityName && entity.entityName == entityName;
                 }).length == 0)
             {
                 arr.push({entityName: entityName, value: result.value});
             }
             else{
                 var entity = dataContext.filter(function (entity) {
                     return entity.name && entity.name == entityName;
                 })[0];
                  var keys = Object.keys(dataContext);
                 keys.map(function (key) {
                     if (dataContext[key].entityName == entityName)
                     {
                         arr.splice(key, 1);
                     }
                 });
                 arr.push({entityName: entityName, value: result.value});
             }
         }
      });
      this.setState({dataContext: arr});
    }

Upvotes: 0

Views: 787

Answers (1)

1ven
1ven

Reputation: 7016

You need write a custom middleware to simplify fetching data from api.
This approach is described in real-world example from redux repo.
Or you can use redux-api-middleware package.

Upvotes: 1

Related Questions