Что такое API в проекте на react?

Question

[Pogran]

К примеру у меня есть вот такой код, допустим с action у меня идёт запрос на добавление

axios.post(`/api/user/`, {
        username: 'test',
        email: '[e-mail]',
        password: 'faefe',
        isEmailVerified: false,
        verifyEmailToken: ''
      });

И есть роутер который это обрабатывает

router.route('/user')
  .post((req, res) => {
    const user = createUser(req.body);

    user.save(err => {
      if(err)
        res.status(400).send(err);

      res.json({ success: true });
    });
  });

Как это завязать на API, т.е нет чёткого понимания что такое API и как его использовать. Или мой роутер это и есть уже API?

Answer 1

[Максим]

У вас приведено 2 куска кода из 2х разных миров:
1) это код из мира фронтенда, в котором вы выполняете запрос на /api/user/
2) это код из мира бэкэнда, в котором вы обрабатываете роут ???/user (почему ???, потому что не видно главного файла сервера, но если представить, что вы разбираете какой-то рабочий пример, скорее всего это и есть обработчик /api/user роута)

API (wikipedia)

Как это завязать на API

1. Делается сервер (на любом из языков), который в принципе является набором роутов, например:

GET на роут /products - отдает все продукты
 POST на роут /products/add - создает новый продукт
 GET на роут /proudcts/1231rh8fdf - отдает один продукт с id 1231rh8fdf
 DELETE ...
 PUT ...

2. Пишется клиент, если в рамках реакт-редукса, то главное в вашем вопросе, это то что вы уже привели - запросы на определенный роут в action creator.
Например:

export function signIn(email, password) {
  return dispatch => {

    dispatch({
      type: USER_SIGN_IN_REQUEST,
    })

    const data = {
      session: {
        email,
        password,
      },
    }

    httpPost(`http://${API_ROOT_V1}/api/sessions`, data)
      .then((data) => {
        dispatch({
          type: USER_SIGN_IN_SUCCESS,
          data: data.account,
        })
      })
      .catch((err) => {
        console.warn(`Sign in error: ${err}`) //eslint-disable-line no-console
        dispatch({
          type: USER_SIGN_IN_FAILURE,
          err,
        })
      })
  }
}

Этот action creator (создатель действий) делает POST запрос на API-сервер (можно и так называть сервер в частном порядке) вместе с логином и паролем. Далее сервер обрабатывает этот запрос (то есть ищет совпадение роута и метода (get/post/put..) и выполняет необходимые операции, после этого выдает ответ (например, json с данными о юзере) и вы эти данные устанавливаете в ваш reducer.

Все что вам нужно, это действительно, разобраться что же такое API и с чем его едят. Конкретных статей на это, к сожалению, дать не могу. Может быть кто-то подскажет дельные.

Итого: что такое API в проекте на React - вопрос не корректный. Правильный вопрос: как вы взаимодействуете с API в приложениях написанных на react, либо: как написать API на языке ХХХ (пример на англ для node.js и express - https://scotch.io/tutorials/build-a-restful-api-us...