Почему данные, которые хранятся в store, не могут переопределяться внутри функции, которая объявлена в React-компоненте?

Question

[crysiscaramel]

есть reducer:

const initState = Immutable.fromJS({
  isConfirmation: false
});

export default function auth(state = initState, action) {
  switch (action.type) {
    case actions.SET_AUTH_SUCCESS: {
      return state.merge({
        isConfirmation: true,
      });
    }

    default:
      return state;
  }
}

используется redux-thunk для middleware и есть action creators, который меняет переменную isConfirmation :

setAuth: body => async (dispatch) => {
  try {
    const { data } = await fetch(body);
    dispatch({
      type: actions.SET_AUTH_SUCCESS,
      payload: data,
    });
  } catch (error) {
    dispatch({
      type: actions.SET_AUTH_FAILURE,
    });
  }
}

есть React-компонент:

const Auth = (props) => {
  const { isConfirmation } = props;

  const handleSubmit = async () => {
    await setAuth()
    console.log(isConfirmation)
  }
  return (
    <button onClick={handleSubmit} />
  )
}

в области видимости handleSubmit , после того как выполниться action creators - setAuth(), isConfirmation останется false, но в области видимости компонента isConfirmation сразу поменяется, почему изменения не отображаются в функции handleSubmit ?

Answer 1

[hzzzzl]

наверняка потому что const { isConfirmation } = props; это происходит при рендере,
а пере-рендер происходит после выхода из handleSubmit(), то есть в хандлеСубмите еще старые пропсы и еще предыдущий isConfirmation

Comments

[Игорь]

А можно меня научить такой код читать, пожалуйста?

[hzzzzl]

loonny, ну это очень простой компонент react.js в общем-то ..

const Auth = (props) => {
  const { isConfirmation } = props;
  // свойство isConfirmation приходит в функцию откуда-то снаружи

  const handleSubmit = async () => {
    // по клику на кнопку что-то сделаем
    await setAuth()
    console.log(isConfirmation)
  }

  return (
    // отрисуем кнопку
    <button onClick={handleSubmit} />
  )
}

если непонятен момент со стрелочками, то =>
https://learn.javascript.ru/arrow-functions-basics

https://ru.react.js.org/docs/getting-started.html

[Игорь]

hzzzzl, Я определенно недоразвит в React. А button onClick={handleSubmit} это же не JSX, он препроцессор использует какой-то или так писать можно?

p.s. нет, со стрелочками то у меня проблем нет, я не на столько глуп )

[hzzzzl]

loonny, почему это, это и есть JSX норма
https://ru.react.js.org/docs/handling-events.html

[crysiscaramel]

hzzzzl, благодарю за ответ, а есть способ отследить изменения в самой функции?

[Игорь]

hzzzzl, JSX же на основе XML, разве нет? Я имею ввиду разве не должно быть так?
<button onClick={handleSubmit} />

[hzzzzl]

crysiscaramel, в ретурне/рендере будут уже актуальные пропсы, когда они изменятся..
как вариант, можно из setAuth() что-то возвращать, типа

const ok = await setAuth()
console.log(ok)  // true | false

[hzzzzl]

loonny, ну да, правильный синтаксис такой и будет :)
<button onClick={handleSubmit} />

я думаю это издержки того, что он без тэга code вставил текст, все тэговые скобочки и убрались

я просто сразу начал код смотреть, синтаксис уже пофиг, vs code сам расставит как надо и подчеркнет :D лень и привычка

[Игорь]

hzzzzl, А отсутствие switch при использовании case и default это тоже норма?

[hzzzzl]

loonny, останется на совести топикстартера хех, но если проект компилируется, а пропсы и прочее меняется и работает, то наверно там вырезан какой-то кусок

[Игорь]

hzzzzl, чисто исправил?

[Mikhail Osher]

loonny, вот тут ещё хорошо расписано https://overreacted.io/how-are-function-components...

[Игорь]

Mikhail Osher, это не связанно ни с одним моим вопросом, зачем вы упомянули меня?