score:19

Accepted answer

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!


Related Query

More Query from same tag