React + Redux, как создать выпадающий список?

Добрый день, как во связке react + redux создать выпадающий список, то есть по щелчку раскрыть список. Есть стэйт в хранилище, есть компонент контэйнер и компонент представление, не могу понять как по шелчку менять данные в сторе.
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>
    );
}
  • Вопрос задан
  • 319 просмотров
Решения вопроса 1
maxfarseer
@maxfarseer
реакт.рф, обучаю реакту и компании
Теория:
по щелчку = по действию от пользователя = экшен
изменить данные в сторе = прокинуть через reducer.

Далее, раз у вас есть вариант показывать/скрывать дропдаун, то можно это состояние спокойно хранить в state компонента-представления, ибо флаг: показано/скрыто вряд ли нужен другим вашим компонентам.

Итого: получаем данные от севера, кладем их в соответствующий редьюсер, по щелчку изменяем стейт компонента и показываем/скрываем список, по клику в списке (если такое нужно) - отправляем экшен, который улетает на сервер, и, допустим, сохраняет измененную инфу о юзере - приходит ответ - вы далее сами решаете, класть этот ответ снова в reducer и как-то заставлять на это реагировать UI или нет.

Когда идет речь, об "отправляем экшен" - это значит из компонента-представления мы вызываем метод (через функцию переданную в качестве пропса) родителя, то есть компоненета-контейнера. В контейнере этот метод должен в итоге вызывать (или сразу быть так передан) "приконекченный" вызов ( внутри функции connect, в качестве аргумента mapDispatchToProps). Если совсем "в наглую делать" для теста, то это 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()
    }
...
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы