Как написать HTTP запрос который бы передавал переменную из React в Ruby?

Question

[Yunique]

Похожий вопрос задавал, но там указал неверные данные что сбило меня и отвечающих.
Сейчас вопрос сводится вот к чему:
Есть форма на реакт, нужно передать значение одного поля (select) на сторону руби.
Подскажите пожалуйста как написать сам http запрос, и можно ли его писать непосредственно в render() -где это значение выводится.

Comments

[Вадим]

Попробуйте что то такое погуглить - react fetch form

[Yunique]

Вадим, благодарю, обязательно загуглю

Answer 1

[Антон Спирин]

Примерно так это делается без использования redux:

const Example extends Component {
  state = {
    select: 'default value',
  };
  
  postData(data) {
    fetch('api/somePath', {
      method: 'post',
      headers: {
        'Accept': 'application/json, text/plain, */*',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(data),
    }).then(res => res.json())
      .then(data => {
        // do something with data
    });
  }  

  handleChange = e => { /* ... */ };  

  handleSubmit = () => {
    const { select } = this.state;

    this.postData({ select });
  };

  render() {
    return (
      <Form>
        <Select value={this.state.select} onChange={this.handleChange} />
        <Button onClick={this.handleSubmit}>Submit</Button>
      </Form>
    );
  }
}

Comments

[Yunique]

Никогда не писал подобные запросы, поэтому позвольте несколько уточняющих вопросов.
По сути поле возвращает одно выбранное из списка слово, которое мне и надо отправить.
Вся часть кода, написанная Вами мне понятна, кроме вот этой:

postData(data) {
    fetch('api/somePath', {
      method: 'post',
      headers: {
        'Accept': 'application/json, text/plain, */*',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(data),
    }).then(res => res.json())
      .then(data => {
        // do something with data
    });
  }

Т.е. вместо 'api/somePath' в
fetch('api/somePath'
я прописываю название файла руби, или класса, или функции которая должна получать переменную.
На данный момент функция на стороне rails получает статическое значение из переменной окружения

def ad_size
    @ad_size ||= FooAbc::FooXyz.get("act_#{env(:shirt_size_id))
  end

а нужно что б эта функция получала результат select

[Антон Спирин]

Alex IdonKnow, тоесть вы и Rails не особо знаете? Тогда все очень плохо. У меня был опыт Ruby только написания REST API и сервиса оповещений по websocket на Sinatra.

Вы должны понимать, что код клиента ничего не знает про код сервера. Они взаимодействуют по протоколу http. Вам надо написать эндпоинт который по определенному URL будет принимать POST запрос и обрабатывать. Этот адрес вам и надо вписать в вызов fetch. Больше не скажу, так как Rails для меня темный лес, хоть и знаю немного Ruby.

[Yunique]

Антон Спирин, я пока все плохо знаю)
Чуть больше месяца изучаю программирование (Rails), React вообще около 2х недель и то все в рамках проекта на Rails. Но активно пытаюсь осваивать))
Возвращаясь к вопросу в fetch('api/somePath'
я должен прописать путь к файлу в котором будет написан эндпоинт который и будет принимать мой запрос?

[Антон Спирин]

Alex IdonKnow, нет. Вы должны отправлять запрос по определенному пути, который обрабатывает ваш сервер. Полагаю, что сейчас он ничего не обрабатывает.
Почитать.

[Yunique]

Антон Спирин, благодарю, обязательно почитаю

Еще хотел уточнить относительно вот этого куска кода

body: JSON.stringify(data),
    }).then(res => res.json())
      .then(data => {
        // do something with data

как я понимаю он преобразует мою переменную в JSON файл.
А что делает вот эта строка then(res => res.json
и второе уточнение:
// do something with data
какие к примеру манипуляции мне может понадобиться делать с этой переменной?

[Антон Спирин]

ак я понимаю он преобразует мою переменную в JSON файл.

В JSON-строку.

А что делает вот эта строка then(res => res.json

Преобразует JSON-строку ответа в объект или массив.

какие к примеру манипуляции мне может понадобиться делать с этой переменной?

Смотря зачем данные посылаете и хотите ли что-либо получить в ответ от сервера.

[Yunique]

Преобразует JSON-строку ответа в объект или массив.

От чего зависит будет это объект или массив?

Смотря зачем данные посылаете и хотите ли что-либо получить в ответ от сервера.

если в ответ получать ничего не нужно нужно ли в // do something with data что-то прописывать?

[Антон Спирин]

Alex IdonKnow,

От чего зависит будет это объект или массив?

От того, что пошлет в ответ сервер.

если в ответ получать ничего не нужно нужно ли в // do something with data что-то прописывать?

Если даже данные ответа не нужны, то показать что-либо пользователю надо. Например оповещение, что данные успешно сохранены или что произведен вход, или переадресацию куда-нибудь сделать это делается в этой функции колбеке, так будет без обработки полученных данных:

.then(res => res.json())
      .then(() => {
        // do something when response received
    });