Как получить значение из promise?

Question

[mnq54482]

Делаю запрос на сервер https://reqres.in/api/login
Мой state:

"email": "[e-mail]",
    "password": "cityslicka"
    "token":""

И собственно, сам код:

fetch("https://reqres.in/api/login", {
        method: "POST",
        body: JSON.stringify({
          email: state.email,
          password: state.password,
        }),
        headers: { "Content-Type": "application/json" },
      })
        .then((response) => {
          if (response.status !== 200) {
            return Promise.reject();
          }
          return response.json();
        })
        .then(res => state.token = res)

Собственно, вопрос - почему последний then не работает так, как хотелось бы и state не меняется? Если вывести console.log(res), то результат с токеном появляется. Как я могу изменить state?

Answer 1

[Ice]

https://ru.reactjs.org/docs/hooks-intro.html
Ознакомьтесь с основами React, а именно с хуком useState
Ошибка в корректности изменения состояния (изменение по ссылке не работает)

Comments

[mnq54482]

Чтож, стоило всё же рассказать подробнее. С useState знаком, и предполагал и ранее, что он решит мою проблему, но проблема в том, что я пишу на react-redux(обучаюсь). Собственно, данный код я писал в собственном redux reducer.

Собственно, мой state

let initialState = {
"email": "[e-mail]",
    "password": "cityslicka"
    "token":""
};

const postReducer = (state = initialState, action)

Тогда у меня главный вопрос, уместно ли использовать хуки react в связке с redux?
Я очень много смотрел курсов, статей. И нигде не видел подобных связок.

[Александр]

mnq54482, https://redux.js.org/usage/writing-logic-thunks

[mnq54482]

Александр, пожалуй, это то, что необходимо, спасибо

Answer 2

[Владимир]

Последний then прекрасно работает

fetch("https://baconipsum.com/api/?type=meat-and-filler", )
  .then((response) => {
    if (response.status !== 200) {
      return Promise.reject();
    }
    return response.json();
  })
  .then(res => console.log("res", res))

Кусок кода
state.token = res
В реакте не имеет смысла
Читай как меняется стейт
https://reactjs.org/docs/state-and-lifecycle.html
https://reactjs.org/docs/hooks-state.html
Чтобы писать на реакте нужно хотябы раз прочитать документацию, это не сложно
https://reactjs.org/docs/getting-started.html

Comments

[mnq54482]

Чтож, стоило всё же рассказать подробнее. С useState знаком, и предполагал и ранее, что он решит мою проблему, но проблема в том, что я пишу на react-redux(обучаюсь). Собственно, данный код я писал в собственном redux reducer.

Собственно, мой state

let initialState = {
"email": "[e-mail]",
    "password": "cityslicka"
    "token":""
};

const postReducer = (state = initialState, action)

Тогда у меня главный вопрос, уместно ли использовать хуки react в связке с redux?
Я очень много смотрел курсов, статей. И нигде не видел подобных связок.

[Владимир]

mnq54482,
1) Нет, у редакса свое управление стейта, и в документации это описано
2) В чистом виде в редаксе нельзя мутировать стейт, вы должны создавать новый на основе старого.
В современном тулките используется immer для того, чтобы разрешать пользователю мутировать стейт, он у вас установлен?

Redux requires that we write all state updates immutably, by making copies of data and updating the copies. However, Redux Toolkit's createSlice and createReducer APIs use Immer inside to allow us to write "mutating" update logic that becomes correct immutable updates.

https://react-redux.js.org/tutorials/quick-start

[mnq54482]

Владимир, не уверен, что имею право использовать toolkit, но спасибо за наводку, буду знать на будущее
Постараюсь в таком случае последовать 2 пункту
P.S не сразу понял, что чтобы использовать immer не требуется устанавливать дополнительных библиотек. Однако всё равно не спасло ситуацию:

.then(value=> nextstate=produce(state, inn =>{
         inn.token = value
       }))

undefined

[Владимир]

mnq54482, Я показал кусок кода в котором Promise прекрасно работает.
Если вы хотите чтобы я разобрался почему не работает ваш кусок кода, потрудитесь локализовать проблему и выложить кусок кода, в котором я могу ее повторить у себя например на codesandbox
Вы сами то хоть раз ошибки искали по трех строчным обрывкам?
Откажитесь от immer и пересобирайте стейт самостоятельно. В spread и rest умеете ? Если нет гуглите на MDN