@SergeyMina

Как сменить/выбрать город в React.js c Redux в RoR?

Здравствуйте.
Изучаю 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>
    );
  }
}
  • Вопрос задан
  • 702 просмотра
Решения вопроса 1
@vsuhachev
Вообще правильный RESTful не должен зависеть от кукисов и сессии.

Соответственно город лучше хранить на клиенте в localStorage. При загрузке дополнительной информации нужно указывать его параметром в запросе.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы