Здравствуйте.
Изучаю React с flux подходом (Redux).
На бекэнде у меня RoR.
Задача: смена города и запись его в сессию.
Раньше на вьюшке у меня было так:
- city.each do |name|
= link_to name.city, controller: 'application', action: 'switch_city', city: name.city
Метод в контроллере:
def switch_city
session[:city] = params[:city] if params[:city]
redirect_to root_url
end
В зависимости от города подтягивалась на страницу дополнительная информация.
После того как начал перенос на React стали возникать вопросы общего характера. В честности как сделать то что выше на React'e.
Что есть на React:
Экшн из которого приходят объекты в редьюсер. В компоненте в componentDidMount все это дело подгружается. Т.е. при загрузке компонента все отлично приходит на вьюшку. Но вот появляется задача сменить город и тут появляется вопрос как это сделать?
Как я себе это представляю: Необходимо передать параметр с value в экшен и в зависимости от него грузить данные.
Вроде этого в экшене:
export function city(valueCity) {
...
}
Или это надо делать как-то в редьюсере? В общем я здесь не догоняю как это сделать. И
примеры не помогают.
Если я не правильно понимаю принцип, поправьте пожалуйста.
Для ясности добавлю наработку на React.
Экшн
export function city() {
return dispatch => {
dispatch({
type: 'LOAD'
});
axios.get(
Routes.root_path(), { headers: { 'Accept': 'application/json' } }
).then(result => {
dispatch({
type: 'LOAD_SUCCESS',
city: result.city,
})
})
}
}
Редьюсер
export default function cityData(state, action) {
switch (action.type) {
...
case LOAD_SUCCESS:
return {
...state,
city: action.city,
};
default:
return state;
}
}
Компонент
class App extends Component {
...
componentDidMount() {
...
dispatch( cityData() );
}
onLoadCity() {
...
dispatch( cityData() );
}
render() {
...
return (
<div>
<ComponentBar onClick={this.onLoadCity}/>
</div>
);
}
}
ComponentBar
export default class ComponentBar extends Component {
render() {
return (
<div>
<button onClick={this.props.onClick}>
Выбрать город
</button>
</div>
);
}
}
Средний