Javascript 在react redux中，状态更改值不会实时应用

登录请求

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")
);

const hist=createBrowserHistory（）；
const store=createStore（reducer，applyMiddleware（thunk））；
ReactDOM.render(
,
document.getElementById（“根”）
);

你好

我已经实现了上面的登录模块

如果超过id和pw值，API将检查成员资格并返回成功和令牌信息

问题是，当我们调用loginrequest时，我们使用dispatch（）更改状态值。 这不适用于实时

一拍是缓慢的

从服务器API发送成功不会立即生效，并且redux具有INIT

执行第二次运行时，将应用success并返回success

---

上面的代码有什么问题？

我不太明白问题出在哪里？ 您调用的问题是

loginRequest（）

和

var result = response && response.data;

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

不会马上跑吗

---

如果是这样的话，当您对api进行异步调用时，这是意料之中的事。

我不太明白问题出在哪里？ 您调用的问题是

loginRequest（）

和

var result = response && response.data;

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

不会马上跑吗

---

如果是这样的话，当您对api进行异步调用时，这是意料之中的事。

如果我理解正确的话，您正在查看

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

作为

console.log

使用的

props

它位于某个组件中

当呈现持有

handleLogin

的组件时，它接受

props

。这些

道具

只是在组件的一个渲染周期内保持不变的对象。因此，当

loginRequest

完成时，您将看到调用

loginRequest

时传递的

porps

。当

props

将被更改时，React将使用更新的props重新渲染组件。所以，如果您想监视道具，您必须像这样从组件本身调用

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/>
}

---

但就其本身而言，修改语法并不能解决您的问题。只需调用

控制台。当承诺得到解决时，将执行log

。

如果我理解正确，您正在查看

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

作为

console.log

使用的

props

它位于某个组件中

当呈现持有

handleLogin

的组件时，它接受

props

。这些

道具

只是在组件的一个渲染周期内保持不变的对象。因此，当

loginRequest

完成时，您将看到调用

loginRequest

时传递的

porps

。当

props

将被更改时，React将使用更新的props重新渲染组件。所以，如果您想监视道具，您必须像这样从组件本身调用

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/>
}

---

但就其本身而言，修改语法并不能解决您的问题。只需调用

控制台。当承诺得到解决时，将执行log

。

它是异步完成的。就像状态一样，如果在异步完成后立即登录控制台，则不会看到状态的变化。就像状态一样，如果控制台在未立即更新后立即登录，则不会看到状态的变化。在类组件中使用时没有问题，在函数组件中使用时有问题。这似乎是由于发电周期的不同。当您执行登录请求并返回INIT时，您应该会获得成功。哪些内容不会立即更新？当您说“执行登录请求”时，您指的是整个

loginRequest

函数还是仅仅

dispatch（login（））

？你是说期望的行为是获得“成功”，但你得到的是“初始”？是的，没错。想要的行为就是成功。但我想我现在明白你的意思了。第一次调用

handleLogin

时，props.status的值将为INIT，这是因为您将初始状态创建为this。即使对

loginRequest

的调用解决后，它仍然具有“旧”道具，console.log INIT也将如此。它不会立即更新。在类组件中使用时没有问题，在函数组件中使用时有问题。这似乎是由于发电周期的不同。当您执行登录请求并返回INIT时，您应该会获得成功。哪些内容不会立即更新？当您说“执行登录请求”时，您指的是整个

loginRequest

函数还是仅仅

dispatch（login（））

？你是说期望的行为是获得“成功”，但你得到的是“初始”？是的，没错。想要的行为就是成功。但我想我现在明白你的意思了。第一次调用

handleLogin

时，props.status的值将为INIT，这是因为您将初始状态创建为this。即使在调用

loginRequest

后，它仍然有“旧”道具，console.log INIT也是如此。