从 store redux 获取状态值

Question

如何从 store 中获取 state 的值？

我已经尝试过使用 store.getState().isLoggedIn 但它不起作用：

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

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

我正在尝试获取状态“isLoggedIn”的值，但它返回“未定义”。我怎样才能正确地从商店中获取状态值？

这是我的源代码

减速机：

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;

Answer 1

我可以使用 JSON.stringify 查看数据

  JSON.stringify(store.getState())

它返回 json 数据。使用此方法可以轻松查看对象

Answer 2

您正在使用combineReducers 生成rootReducer。

combineReducers() 生成的状态命名空间是每个 reducer 在其键下的状态，并传递给 combineReducers()

所以store.getState() 将返回这样的对象

{ auth: 
    { isLoggedIn:false,
      isLoading:false,
      userData:{},
      error:undefined
    }
}

要引用isLoggedIn，您必须执行alert(state.auth.isLoggedIn);