CODEWITHSUNDEEP
reactjsflux
user2768132
user2768132

Reputation: 470

Pass data between independent component using flux react

I am trying to pass data from one component to another. but it has no parent child relation and it is independent from each other. I want to do it using flux not redux. Can anyone help me to do this? below are my code.

export class EmpSearch extends React.Component {
 constructor(props) {
 super(props);
 this.state = {
  Empnumber: ''
 };
}

updateEmpNumber(e) {
this.setState({Empnumber: e.target.value});
}

 render() {
  return (
  <div className="row">
    <form>
      <div className="form-group">
        <label htmlFor="Empnumber">Emp Number</label>
        <input type="text" className="form-control" id="Empnumber" placeholder="Emp Number" value={this.state.Empnumber} onChange={this.updateEmpNumber.bind(this)}/>
      </div>
    </form>
  </div>
);
}
}
export default EmpSearch

The other file is where i want to send the EmpNumber is below,

class EmpDetail extends React.Component {
render() {
return (
  <div className="container">
    <input type="text"/>
  </div>
);
}
}

 export default EmpDetail;

Upvotes: 0

Views: 153

Answers (1)

TRomesh
TRomesh

Reputation: 4481

Assuming you have already implemented the flux architecture in your app.

your 1st component will be like this.

import React from 'react';
import UserAction from '../../Actions/UserActions';

export class EmpSearch extends React.Component {
 constructor(props) {
 super(props);
 this.state = {
  Empnumber: ''
 };
}

updateEmpNumber(e) {
this.setState({Empnumber: e.target.value});
UserAction.employeeNumb(this.state.Empnumber);
}

 render() {
  return (
  <div className="row">
    <form>
      <div className="form-group">
        <label htmlFor="Empnumber">Emp Number</label>
        <input type="text" className="form-control" id="Empnumber" placeholder="Emp Number" value={this.state.Empnumber} onChange={this.updateEmpNumber.bind(this)}/>
      </div>
    </form>
  </div>
);
}
}
export default EmpSearch

The Actions file will look like

import {dispatch,register} from '../Dispatcher/Dispatcher';

export default {

      employeeNumb(Data){

        dispatch({ actionType:'EMPNO',data:Data});
      }
}

The Store will look like

import {dispatch,register} from '../Dispatcher/Dispatcher';
import AppConstants from '../Constants/AppConstants';
import {EventEmitter} from 'events';

const CHANGE_EVENT = 'change';
var a=0;

const UserStore = Object.assign(EventEmitter.prototype,{
  emitChange(){
    this.emit(CHANGE_EVENT)
  },
  addChangeListener(callback){
    this.on(CHANGE_EVENT,callback);
  },
  removeChangeListener(callback){
    this.removeListener(CHANGE_EVENT,callback)
  },
  setEmpData(data){
    a=data;
  },
  getEmpData(){
    return a;
  }

});

  dispatcherIndex:register((action)=>{
     switch (action.actionType) {
         case AppConstants.EMPNO:
              UserStore.setEmpData(action.data);
              UserStore.emitChange();
              break;
     }

     UserStore.emitChange();

  });


export default UserStore;

The dispatcher file

import {Dispatcher} from 'flux';

const flux = new Dispatcher();

export function register(callback){
  return flux.register(callback);
}

export function dispatch(actionType,action){
  flux.dispatch(actionType,action);
}

and the 2nd Component file looks like

import React from 'react';
import Store from '../../Store/UserStore';

    class EmpDetail extends React.Component {

      constructor(props){
         super(props);
         this.state={
           empno:''
         };

      }

      componentDidMount(){
        Store.addChangeListener(this._onChange);
      }

      componentWillUnmount = () =>{
      Store.removeChangeListener(this._onChange);
      }

      _onChange = () =>{
       this.setState({empno:Store.getEmpData()});
      }


    render() {
    return (
      <div className="container">
        <input type="text"/>
        <input type="button" onClick={()=>{console.log(this.state.empno);}}/>
      </div>
    );
    }
    }

     export default EmpDetail;

What you have tried might be slightly different but this is the normal flow for what you are looking for.

Upvotes: 2

Related Questions