React redux inputs

Question

This is a react form

const mapStateToProps = state => {
    return {
        number:state.number,
        id: state.id
    }
   
}
const mapDispatchToProps = (dispatch) => {
    return {
        submitInput: (event) => {
        dispatch(handleChanger(event))
      }
    }
  };
class  Id extends React.Component {
    constructor(){
        super ();

        this.state = {
            NUMBER:'',
            ID:''
        }
        this.handleChange = this.handleChange.bind(this);
    }

    handleChange(events) {
        this.setState({
            [events.target.name]:events.target.value
        });
      }

    render(){
        return (
            <div className="bodywrapper">
                <div className="projectcontainer">
                    <div className="textcontainer">
                        <div className="textheader">Files required</div>
                    </div>
                    <div className="bodycontainer">
                        <div className="fileinput"> 
                            <input className="idforminput" 
                                placeholder="Project name" 
                                type="text"
                                onChange = {this.handleChange}
                                value = {this.state.ID}
                                name = "ID"
                                /></div>    
                        <div className="idtextcontainer">
                            <div className="filetext fileinput">Number of slides required</div>
                        <div className="fileinput"> 
                            <input className="idformnumberinput" 
                                   placeholder="10" 
                                   type="number" 
                                   onChange = {this.handleChange}
                                   onChange = {this.props.submitInput(this.state.ID)}
                                   name = "NUMBER" 
                                   value={this.state.NUMBER}/> 
                            </div>     
                        </div>      
                        {this.props.ID}    
                    </div>
                    <div className="buttoncontainer">
                        <button className="bottontext" 
                        
                                onClick ={this.props.submitInput(this.state.ID) }>
                                <a href="link.html">Next step</a> 
                        </button>
                    </div>
                </div>
             </div>
        )
    }

    
}
export default connect(mapStateToProps,mapDispatchToProps)(Id)

the handlechage add the value of inputs to the state.

and i need the state in globally,so used redux. MDTP use handleChanger action to add the values to reducer:

export const handleChanger = (event) => ({
        type:event.target.name,
        event:event
    })

So the type became ID it will add the corresponding value to the state of reducer:

export const handleChanger = (state = initialState,action) => {
    switch (action.type) {
        case NUMBER:
            return{
                ...state,
                number: action.event
            }
        case ID:
            return {
                ...state,
                id: action.event
            }
        default: return state
    }
}

so why this code is not working? or could you suggest any other ways to add inputs to redux state?

Answer 1

You don't have to maintain the state in your component as you want in the redux store. Please check the following code

// reducer 
const initialState = { 
    ID: 0,
    Number: ''
}
const inputDataReducer = (state=initialState,action) => {
    switch(action.type) {
        case 'SET_INPUT_DATA': {
            return {
                ...state,
                ...action.payload
            }
        }
        default: return state;
    }
}


// action 
export function setInputDataToRedux(name,value) {
    return {
        type:'SET_INPUT_DATA',
        payload: {
            [name]:value
        }

    }
}


class Id extends React.Component {
    constructor(props){
        super(props);
        this.handleChange = this.handleChange.bind(this);
    }

    handleChange(events) {
        this.props.setInputDataToRedux(events.target.name,events.target.value);
      }

    render(){
        return (
            <div className="bodywrapper">
                <div className="projectcontainer">
                    <div className="textcontainer">
                        <div className="textheader">Files required</div>
                    </div>
                    <div className="bodycontainer">
                        <div className="fileinput"> 
                            <input className="idforminput" 
                                placeholder="Project name" 
                                type="text"
                                onChange = {this.handleChange}
                                value = {this.props.ID}
                                name = "ID"
                                /></div>    
                        <div className="idtextcontainer">
                            <div className="filetext fileinput">Number of slides required</div>
                        <div className="fileinput"> 
                                <input className="idformnumberinput" 
                                   placeholder="10" 
                                   type="number" 
                                   onChange = {this.handleChange}
                                   onChange = {this.props.submitInput(this.state.ID)}
                                   name = "NUMBER" 
                                   value={this.props.NUMBER} 
                                /> 
                            </div>     
                        </div>      
                        {this.props.ID}    
                    </div>
                    <div className="buttoncontainer">
                        <button className="bottontext" 
                        
                                onClick ={this.props.submitInput(this.state.ID) }>
                                <a href="link.html">Next step</a> 
                        </button>
                    </div>
                </div>
             </div>
        )
    }

    
}
const mapStateToProps = (state) => ({
    // fetch both id and number from reducer
    ID: state.reducer.ID, // add your reducer
    Number: state.reducer.number // add your reducer
})
export default connect(mapStateToProps,mapDispatchToProps)(Id)