В реаги-редуксе значение изменения состояния не применяется в реальном времени

Question

loginRequest

const handleLogin = (id, pw) => {
    return props.loginRequest(id, pw).then(
              console.log(props.status);
           )
}

действия

/* LOGIN */
export function loginRequest(username, password) {
    return (dispatch) => {
        dispatch(login());

        //API
        return axios.post('http://localhost:8080/api/user/login', {username, password})
        .then(response => {
            var result = response && response.data;

            if(result.success == true) {
                dispatch(loginSuccess(username, result.token));
            } else {
                dispatch(loginFailure());
            }
        })
        .catch(response => {
            //logging 처리 필요
            console.log(response);
        });
    };
}

редукторы

const initialState = {
    login: {
        status: 'INIT',
    },
    register: {
        status: 'INIT',
        error: -1
    },
    status: {
        valid: false,
        isLoggedIn: false,
        currentUser: '',
        user: {},
        token: ''
    }
};

        /* LOGIN */
        case types.AUTH_LOGIN:
          return {
            ...state,
            login: {
              status: 'WAITING'
            },
          }
        case types.AUTH_LOGIN_SUCCESS:
          return {
            ...state,
            login: {
              status: 'SUCCESS',
            },
            status: {
              ...state.status,
              isLoggedIn: true,
              currentUser: action.username,
              token : action.token
            }
          }
        case types.AUTH_LOGIN_FAILURE:
          return {
            ...state,
            login: {
              status: 'FAILURE'
            }
          }
        default:
          return state;
      }

index. js

const hist = createBrowserHistory();
const store = createStore(reducers, applyMiddleware(thunk));
ReactDOM.render(
  <Provider store={store}>
    <Router history={hist}>
      <Switch>
        <Route path="/rtl" component={RtlLayout} />
        <Route path="/auth" component={AuthLayout} />
        <Route path="/admin" component={AdminLayout} />
        <Redirect from="/" to="/admin/dashboard" />
      </Switch>
    </Router>
  </Provider>,
  document.getElementById("root")
);

Здравствуйте

Я реализовал модуль входа в систему выше.

Если значения id и pw превышены, API проверяет членство и возвращает успех и информация о токене.

Проблема в том, что когда мы вызываем loginrequest, мы изменяем значение состояния с помощью dispatch (). Это не применяется в режиме реального времени.

Один удар применяется медленно.

Успешная отправка через серверный API не вступает в силу немедленно, а для избыточности используется INIT.

Когда выполняется второй прогон, применяется успех и возвращается успех.

Что не так с кодом выше?

Answer 1

Если я правильно понимаю, вы смотрите на вывод

const handleLogin = (id, pw) => {
    return props.loginRequest(id, pw).then(
              console.log(props.status);
           )
}

И, поскольку console.log использует props, он находится внутри какого-то компонента.

Когда отображается компонент, содержащий handleLogin, он принимает props. Это props просто объект, который останется неизменным в течение одного цикла рендеринга компонента. Поэтому, когда loginRequest будет закончен, вы увидите porps, который был пройден, когда был вызван loginRequest. Когда props будет изменен, React будет повторно визуализировать компонент с обновленными реквизитами. Поэтому, если вы хотите отслеживать реквизиты, вы должны вызывать console.log из самого компонента следующим образом:

const SomeComponent = props => {
    console.log(props.status);

    const handleLogin = (id, pw) => {
        return props.loginRequest(id, pw).then(
            console.log(props.status);
        )
    }

    return <div/>
}

Также у вас есть ошибка в then. Он принимает функцию, которая будет выполнена, когда обещание будет разрешено. Правильное использование:

.then(() => console.log(props.status))

Но само по себе изменение синтаксиса не решит вашу проблему. Просто вызов console.log будет выполнен, когда обещание будет выполнено.

Answer 2

Я не совсем понимаю, в чем проблема? Неужели проблема, которую вы вызываете loginRequest() и

var result = response && response.data;

if(result.success == true) {
    dispatch(loginSuccess(username, result.token));
} else {
    dispatch(loginFailure());
}

, не запускается сразу?

Если это так, этого можно ожидать, когда вы делаете асин * c вызов апи.