javascript - 在react-redux中，状态变化值不是实时应用的

Question

登录请求

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

reducer

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 将检查成员资格并返回成功和 token 信息。

问题在于，当我们调用loginrequest时，我们用dispatch()改变了状态值。 这不适用于实时。

缓慢地施加一个节拍。

服务器API发送成功不会立即生效，redux已经INIT。

当执行第二次运行时，应用成功并返回成功。

上面的代码有什么问题吗？

Answer 1

我不太明白问题出在哪里？ 是您调用 loginRequest() 和

的问题吗

var result = response && response.data;

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

不立即运行？

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