React + Redux how to create a drop down list?

Good day, in conjunction react + redux to create a dropdown list that is clicked to expand the list. There is a state in the repository, there is a component of container and component performance, can not understand how to selccu to change the data in the store.
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>
</container></provider>,
document.getElementById("root")
);


const Container = () => {

 return (
 <div classname="container_main">
<usercontainer>
<listbox>
</listbox></usercontainer></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>
);
}
June 7th 19 at 15:38
1 answer
June 7th 19 at 15:40
Solution
Theory:
click = action user = action
to change the data in the store = to shoot through the reducer.

Next time you have an option to show/hide here calls a dropdown, you is able to store state in a component view for flag: shown/hidden do not need other components.

Total: the data obtained from the North, put them in the appropriate reducer on click change the state of the component and show/hide the list by clicking in the list (if necessary) - send action, which flies to the server, and, for example, saves the modified info on the user - comes the answer - you then decide to put this answer again in a reducer and make it respond to the UI or not.

When talking about the "sent action" - it means from the component representation we call the method (through the function passed as props) parent, that is componeneta container. In a container this method should eventually cause (or be transferred) "prokopchennye" call ( inside the connect function, the argument mapDispatchToProps). If you really "arrogant to do" for the test, it 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()) // and then this.props.myNewActionCreator need to pass in a component representation. If you want to do additional processing, it is possible to pass a method from the container in which the first processing, and then call this.props.myNewActionCreator
}))(AboutUser)
...

const changeRoleUser = () => {
this.props.anyName()
}
...
If understood correctly in the view, create a button and bind createrAction onClick={props.visibility_role}
Then call the Manager in the container
(dispatch, state) => ({
visibility_role:dispatch(showRoleUser(state.customerProject.visible_role))
})


He createrAction
export const showRoleUser = (visible_role) => {
{
 type: SHOW_ROLE_USER,
 payload: visible_role
}

}


Reducer
const customerProject = (state = initialState, action) => {
 if (action.type === SHOW_ROLE_USER) {
 return {
 ...state action.payload
}
}

 return state;
}

All right ? How to write actionCreater? Webpack swears, does not find a comma. - Jamison_Miller28 commented on June 7th 19 at 15:43
here at least you need to fix:
(dispatch, state) => ({
 visibility_role: () => dispatch(showRoleUser(state.customerProject.visible_role))
})
- dannie.Stehr commented on June 7th 19 at 15:46
Well and how with help of Aksenov to change the field storage? - Jamison_Miller28 commented on June 7th 19 at 15:49
you initialState strange... if you want to change a role, you have it there should be written and it needs to be changed:
example:
const initialState = {
 show_role: true,
 default_role: "CUSTOMER",
 roles_user: [
"CUSTOMER",
"ARTIST",
"JUDGE"
],
 projects: [],
 activeRole: ", // new field
};
...
const customerProject = (state = initialState, action) => {
 if (action.type === SHOW_ROLE_USER) {
 return {
 ...state, { activeRole: action.payload }
}
}

 return state;
}
- dannie.Stehr commented on June 7th 19 at 15:52
, show_role - field upon which is displayed or not the drop-down list that you want to change.
...state, { show_role: false } webpack does not understand why this design? - Jamison_Miller28 commented on June 7th 19 at 15:55
well maybe it's about the spread operator is not aware of? make example on github...
(must be configured in the config of Babel:
{
 "presets": ["es2015", "stage-3"],
}
- dannie.Stehr commented on June 7th 19 at 15:58
many presets installed, does not help the link to the gist
https://gist.github.com/Sergey19940808/c89055363da... - Jamison_Miller28 commented on June 7th 19 at 16:01
the link to the gist to make it work, and the project on github, no ?) I code not see a problem. It is necessary to look all. Therefore, prepare an example on github. - dannie.Stehr commented on June 7th 19 at 16:04
might be a problem is that in plugins some brute force.. stage 0 automatically means that the stage-1, 2, & 3.. and leave only:
{
 "presets": ["es2015", "stage-0"],
}

and plugins remove.. if it works then OK, leave if the remote will work, but will come up some other problem - look for any further configuration. - dannie.Stehr commented on June 7th 19 at 16:07

Find more questions by tags ReduxReact