How to get the status of checkbox and pass it into redux

my question

I want to pass the checkbox information of the user name and permission settings of this page to redux.
and show it as a list on another page.

how many points do not understand

how to get the status of checkbox in redux
I need to send out the string of user name and the selected information of multiple checkbox at the same time. How do I design the format of this state?

seek the advice of the great gods ~

class AddUser extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            userinfo : {
                // username :"",
                // usercheck1 : false,
                // usercheck2 : false,
                // usercheck3 : false,
                // usercheck4 : false,
                // usercheck5 : false,
            }
        }
    }
    onInputChangeName(e){
        let inputValue  = e.target.value;
        this.setState({
            userinfo : Object.assign(this.state.userinfo,{username : inputValue })
        });
    }
    onSubmitAdd(){
        store.dispatch(AddUser(this.state.userinfo));
        this.props.history.push("/layout/id");
    }
    render(){
        return(
            <div class="add_page">
                <TopNav />
                <div className="addmain">
                    <div className="addcenter">
                        <p class="adduser_title">
                        <div className="addtablebg">
                            <div className="addtable">
                                <div></div>
                                <div><input type="text" class="adduser_inputname" placeholder="" onChange={e => this.onInputChangeName(e)}/></div>
                                <div></div>
                                <div class="adduser_checkbox"> 
                                
                                    <div class="adduser_setitle"></div>
                                    <div class="adduser_setitle"></div>

                                    <div></div>
                                    <div><input class="adduser_check" name="1" type="checkbox" onChange={e => this.onInputChange1(e)}/></div>
                                
                                    <div></div>
                                    <div><input class="adduser_check" name="2" type="checkbox" onChange={e => this.onInputChange2(e)}/></div>
                            
                                    <div></div>
                                    <div><input class="adduser_check" name="3" type="checkbox" onChange={e => this.onInputChange3(e)}/></div>
                            
                                    <div></div>
                                    <div><input class="adduser_check" name="4" type="checkbox" onChange={e => this.onInputChange4(e)}/></div>
                            
                                    <div></div>
                                    <div><input class="adduser_check" name="5" type="checkbox" onChange={e => this.onInputChange5(e)}/></div>
                                
                                </div>
                            </div>
                            <button class="adduser_confirm" onClick={e => {this.onSubmitAdd(e)}}></button>
                        </div>
                    </div>
                </div>
            </div>
            )
    }
}

// state const initialState = { userinfo: { userName: '', permission: [{ name: '', checked: true, }, { name: '', checked: false, }, { name: '', checked: false, }, { name: '', checked: false, }, { name: '', checked: false, }], } }; // export default function userPermission(state = initialState, action) { switch (action.type) { case 'CHANGE_PERMISSION': const newData = state.userinfo.permission.map((item, index) => action.index === index ? { ...item, checked: action.checked } : item ); return { userinfo: { ...state.userinfo, permission: newData } }; default: return state; } }

import React from 'react'; import { connect } from 'react-redux'; class AddUser extends React.Component { code... render() { const { userinfo, handleChange, } = this.props; return ( <div className="add_page"> code... { // handleChange userinfo.permission.map((item, index) => ( <div key={index}> <span>{item.name}</span> <input type="checkbox" className="adduser_check" name={index} checked={item.checked} onChange={(e) => handleChange(e.target.checked, index)} /> </div> )) } code... </div> ) } } function mapStateToProps(state) { return { userinfo: state.userinfo, }; } function mapDispatchToProps(dispatch) { // actionreducer return { handleChange: (checked, index) => dispatch({ type: 'CHANGE_PERMISSION', checked, index }), }; } export default connect(mapStateToProps, mapDispatchToProps)(AddUser);