Question

为什么在执行store.dispatch之后商店返回的状态没有改变？

这是我执行store.dispatch的代码：

import * as actions from 'actions/actions'
import store from 'store/store'

store.dispatch(actions.login(this.state.username,this.state.password)).then(() => {
      alert(JSON.stringify(store.getState()));
    });

执行此代码时，输出为：

{身份验证： {isLoggedIn：false， isLoading：false，用户数据：{}，错误：未定义 } }

输出与在reducer中初始化的值相同。但是在再次调用函数store.dispatch(actions.login(this.state.username,this.state.password))之后，状态终于改变了。我想念什么吗？

这是我的源代码

减速器：

const INITIAL_STATE={
  isLoggedIn:false,
  isLoading:false,
  userData:{},
  error:undefined
}

export default function auth(state=INITIAL_STATE,action){
  console.log(action.type);
  switch (action.type) {
    case 'LOGIN_ATTEMPT':
      return{
        ...state,
        isLoading:true,
        isLoggedIn:false
      }
      break;
    case 'LOGIN_SUCCESS':
    return {
        ...state, 
        isLoading:false,
        isLoggedIn:true,
        userData:action.userData,
        error:undefined
      }
      break;
    case 'LOGIN_FAILED':
      return{
        ...state,
        isLoading:false,
        isLoggedIn:false,
        error:action.error
      }
      break;
    case 'LOGOUT':
      return{
        ...state,
        isLoading:false,
        isLoggedIn:false
      }
      break;
    default:
      return state
  }
}

动作：

export function isLoading(bool:Boolean){
  return{
    type:'LOGIN_ATTEMPT',
    isLoading:bool
  }
}

export function loginSuccess(userData:Object){
  return{
    type:'LOGIN_SUCCESS',
    userData
  }
}

export function loginFailed(error:Object){
  return{
    type:'LOGIN_FAILED',
    error
  }
}

export function login(uname,pass){
  return dispatch => {
    dispatch(isLoading(true));
    return fetch('http://192.168.99.1:5000/user/login',{
      method:'POST',
      headers:{
        'Content-Type':'application/json'
      },
      body:JSON.stringify({
        username:uname
      })
    })
    .then((response) => {
      if(response.status < 300){
        dispatch(isLoading(false))
        response.json().then((responseJSON) => {
          if(responseJSON['message'] == "True" && bcrypt.compareSync(pass, responseJSON['hash']) ){
            console.log("responseJSON",responseJSON);
            dispatch(loginSuccess(responseJSON));
          }
          else{
            dispatch(isLoading(false))
            dispatch(loginFailed(responseJSON.message))
          }
        })
      }
      else{
        response.json().then((responseJSON) => {
          console.log("responseJSON",responseJSON);
          dispatch(isLoading(false))
          dispatch(loginFailed(responseJSON.message))
        })
      }
    })
    .catch((error) => {
      console.log("error",error);
      dispatch(isLoading(false))
      dispatch(loginFailed(error))
    })
  }
}

商店：

import {combineReducers} from 'redux'
import auth from './authReducer'
import {createStore,applyMiddleware} from 'redux'
import thunk from 'redux-thunk';

const rootReducer = combineReducers({
  auth
})

let store = createStore(rootReducer,applyMiddleware(thunk))

export default store;

更新：看来函数login只会返回第一个调度：dispatch(isLoading(true));。它不会从提取中返回调度。

export function login(uname,pass){
  return dispatch => {
    dispatch(isLoading(true));
    return fetch('http://192.168.99.1:5000/user/login',{
      method:'POST',
      headers:{
        'Content-Type':'application/json'
      },
      body:JSON.stringify({
        username:uname
      })
    })
    .then((response) => {
      if(response.status < 300){
        dispatch(isLoading(false))
        response.json().then((responseJSON) => {
          if(responseJSON['message'] == "True" && bcrypt.compareSync(pass, responseJSON['hash']) ){
            console.log("responseJSON",responseJSON);
            dispatch(loginSuccess(responseJSON));
          }
          else{
            dispatch(isLoading(false))
            dispatch(loginFailed(responseJSON.message))
          }
        })
      }
      else{
        response.json().then((responseJSON) => {
          console.log("responseJSON",responseJSON);
          dispatch(isLoading(false))
          dispatch(loginFailed(responseJSON.message))
        })
      }
    })
    .catch((error) => {
      console.log("error",error);
      dispatch(isLoading(false))
      dispatch(loginFailed(error))
    })
  }
}

调用store.dispatch后状态未更新

0 个答案: