ReactJS/Reflux Converting mixins to ES6

Question

I'm trying to convert the following Compenent to ES6, I already modified all the code for Store/Action, I can't figure out a solution to replace mixins and use normal ES6.

This is for a front end project, I'm just trying to parse JSON Data into components using Reflux.

import React from 'react';
import Reflux from 'reflux';
import {Jumbotron} from 'react-bootstrap';
import {Button} from 'react-bootstrap';
import {Link} from 'react-router';
import PopularActions from '../Actions/DragAction';
import PopularStore from '../Stores/DragStore';
import createReactClass from 'create-react-class';

const JSONViewerReflux = createReactClass({
//this is the part that I need in ES6
  mixins: [Reflux.connect(PopularStore, 'DragStore')],

  DragStore: null,

  render() {
    const store = this.DragStore ? this.DragStore : this.state.DragStore;

    if(store) {
      return (
        <Jumbotron>
          <h2>JSON Elements</h2>
          {
            store.map(({Name, Id}) => <div>
              <h3>{Name} </h3>


            <h3>{Id}</h3>
            </div>)
          }
        </Jumbotron>
      );
    } else {
      setTimeout(PopularActions.fetchPopular, 2000);
      return <span />
    }

  }
});

export default JSONViewerReflux;

//Here is the store/action

import Reflux from 'reflux';
import $ from 'jquery';
import DragActions from '../Actions/DragAction';

const data = [];


function parseData(fetchedData) {
  console.log(fetchedData);
  const dragitemData = fetchedData.users;
  const dragitem = dragitemData.map(({name, ID}) => {
    return {
      Name: name,
      Id: ID
    };
  });

  this.dragitem = dragitem;
  this.trigger(this.dragitem);
}

const DragStore = Reflux.createStore({
  listenables: [DragActions],

  Url: 'https://api.myjson.com/bins/dvx65',

  dragitem: [],

  init() {
    this.fetchPopular();
  },

  fetchPopular() {
    const that = this;

    $.ajax({
      url: this.Url,
      method: 'GET'
    }).done(parseData.bind(this))
  }

});


export default DragStore;


import Reflux from 'reflux';

const DragAction = Reflux.createActions([
  'fetchPopular'
]);

export default DragAction;

It works but I just want it in ES6 like the rest of the project so I can use easily the {NAME} and {ID} with other components.

score 0 · Answer 1 · answered Jul 25 '19 at 11:26

0

mixins are no longer supported in React.Component (ES6 and beyond). Alternative is discussed in this post

answered Jul 25 '19 at 11:26

Hadi

3
1

I thought they were supported in ES6, silly of me to post about it in stackoverflow. That's exactly the help I needed. – Oussama Jul 25 '19 at 15:29

ReactJS/Reflux Converting mixins to ES6

1 Answers1