React + Redux, how to create a dropdown list?

Question

React

Good afternoon, how to create a drop-down list in the react + redux bundle, that is, open the list on click. There is a state in the storage, there is a container component and a view component, I can’t figure out how to change the data in the store by clicking.

const initialState = {
    show_role:  true,
    default_role: "CUSTOMER",
    roles_user: [
        "CUSTOMER",
        "ARTIST",
        "JUDGE"
    ],
    projects: []
};


const customerProject = (state = initialState) => {
  return state;
}


const store = createStore(
  customerProject, 
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);

render(
    <Provider store={store}>
    	<Container />
    </Provider>,
    document.getElementById("root")
);


const Container = () => {
 
    return (
        <div className="container_main">
            <UserContainer />
            <ListBox />
        </div>
    );
}


const UserContainer = connect(
  state => ({
    default_role: state.customerProject.default_role,
    show_role: state.customerProject.show_role,
    roles_user: state.customerProject.roles_user
    
  }),
  dispatch => ({

  }))(AboutUser)


const AboutUser = (props) => {

        
    const showRoleUser = () => {

    }



    const changeRoleUser = () => {
        
    }

       
    return (
            <div className="container_about_user">
                <aside className="me_user">
                    <span>ME</span>
                </aside>
                <div className="about_profile">
                    <img className="avatar_profile"
                         src="./static/img/picture.jpeg"
                         width="50"
                         height="50"
                    />
                    <div className="info_profile">
                        <h4 className="name">
                            VASILIY PETROV
                        </h4>
                        <p className="position">
                            Independent producer
                        </p>
                        <p className="city">
                            Bangkok, Thailand
                        </p>
                    </div>
                    <div className="role_user">
                        <span onClick={showRoleUser}>
                            <p>{props.default_role}</p>
                        </span>
                        <div className={ props.show_role ? "":"dropdown_role"}>
                            {props.show_role ? "":props.roles_user.map((item) => {
                                return <div
                                            onClick={changeRoleUser}
                                            key={item}>{item}
                                        </div>
                            })}
                        </div> 
                    </div>
                </div>
            </div>
    );
}

Answer 1

Theory:
on click = on action from the user = action
to change the data in the store = pass through the reducer.
Further, since you have the option to show / hide the dropdown, then you can safely store this state in the state of the view component, because the flag: shown / hidden is hardly needed by your other components.
Total: we get data from the north, put it in the corresponding reducer, on click we change the state of the component and show / hide the list, on click in the list (if necessary) we send an action that flies to the server, and, for example, saves the changed information about user - the answer comes - you then decide for yourself whether to put this answer back into the reducer and somehow make the UI react to it or not.
When it comes to "sending an action" - this means from the view component we call the method (through the function passed as a prop) of the parent, that is, the container component. In the container, this method should eventually call (or be passed as such) a "coupled" call (inside the connect function, as an argument to mapDispatchToProps). If it’s completely “impudent to do” for the test, then this is store.dispatch.ACTION_CREATOR_NAME

const UserContainer = connect(
  state => ({
    default_role: state.customerProject.default_role,
    show_role: state.customerProject.show_role,
    roles_user: state.customerProject.roles_user
    
  }),
  dispatch => ({
    anyName: () => dispatch(myActionCreator()) // и затем this.props.myNewActionCreator нужно передать в компонент-представление. Если нужно сделать доп-обработку, то передать метод из контейнера, в котором будет сначала обработка, а потом вызов this.props.myNewActionCreator
  }))(AboutUser)
...

const changeRoleUser = () => {
        this.props.anyName()
    }
...