reactjs - Pass data between independent component react and redux

Question

I am very new to react and redux.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. 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>
    );
  }
}

function mapStateToProps(state){
  return{
    Empnumber: state.Empnumber
  };
}

export default connect(mapStateToProps)(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;

Answer 1

Ok so here is an example. I'm going to assume you have all the Redux store configured already, i.e. store created, rootReducer etc... as that's a separate post altogether.

So the basic idea is that when you want to update your Redux store state you dispatch an action to the reducer and send a payload of data along with it. This sounds confusing but essentially it's just to tell the reducer what you want to do i.e. "Hey reducer I want you to UPDATE_EMP_NUMBER and here is the data".

A reducer is basically just a massive switch statement as per below, that simply returns the new part of state based on your given action.

Again I know nothing about your architecture, store etc so this is all assumption based but here is what it may look like for you.

Reducer

export default function employeeReducer(state = [], action) {
    switch (action.type) {
        case UPDATE_EMP_NUMBER:
            {
                const Empnumber = action.payload;
                return {
                    ...state,
                    Empnumber
                };
            }
            case ANOTHER_ACTION:
            {
                // etc...
            }
        default:
            return state;
    }
}

With the above in mind, you could update your code like so.

EmpSearch

export class EmpSearch extends React.Component {
        // Not needed anymore as state going to Redux and not local component state
    /*
        constructor(props) {
        super(props);
        this.state = {
            Empnumber: ''
        };
        }
    */

    updateEmpNumber(e) {
        // No need to set state here as you are now passing this data to Redux store
        // this.setState({Empnumber: e.target.value});

        // Instead we will dispatch an action and send the empNumber to the reducer
        this.props.dispatch({
                type: 'UPDATE_EMP_NUMBER',
                payload: 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.props.Empnumber} onChange={this.updateEmpNumber.bind(this)}/>
            </div>
        </form>
        </div>
    );
    }
}
    
function mapStateToProps(state){
    return {
        Empnumber: state.Empnumber
    }
}
    
export default connect(mapStateToProps)(EmpSearch);

Then your EmpDetail class just needs to connect to the store (or be passed the data as a prop, but easier to just connect it).

EmpDetail

class EmpDetail extends React.Component {
    render() {
        const empNumber = this.props.Empnumber;
        return (
            <div className="container">
                Empnumber = {empNumber}
            </div>
        );
    }
}

function mapStateToProps(state){
    return {
        Empnumber: state.Empnumber
    }
}
    
export default connect(mapStateToProps)(EmpDetail);

I really hope this helps, it's so hard to explain this when you can't see where this is going to end up!