Получить значение состояния из хранилища

как я могу получить значение состояния из хранилища?

Я уже пытался использовать 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», но оно возвращает «undefined». как я могу правильно получить значение состояния из магазина?

вот мой исходный код

Редуктор:

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

export default function auth(state=INITIAL_STATE,action){
  console.info(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.info("responseJSON",responseJSON);
            dispatch(loginSuccess(responseJSON));
          }
          else{
            dispatch(isLoading(false))
            dispatch(loginFailed(responseJSON.message))
          }
        })
      }
      else{
        response.json().then((responseJSON) => {
          console.info("responseJSON",responseJSON);
          dispatch(isLoading(false))
          dispatch(loginFailed(responseJSON.message))
        })
      }
    })
    .catch((error) => {
      console.info("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;
Умерло ли Create-React-App?
Умерло ли Create-React-App?
В этом документальном фильме React.dev мы исследуем, мертв ли Create React App (CRA) и какое будущее ждет этот популярный фреймворк React.
Освоение React Native: Пошаговое руководство для начинающих
Освоение React Native: Пошаговое руководство для начинающих
React Native - это популярный фреймворк с открытым исходным кодом, используемый для разработки мобильных приложений. Он был разработан компанией...
В чем разница между react native и react ?
В чем разница между react native и react ?
React и React Native - два популярных фреймворка для создания пользовательских интерфейсов, но они предназначены для разных платформ. React - это...
От React к React Native: Руководство для начинающих по разработке мобильных приложений с использованием React
От React к React Native: Руководство для начинающих по разработке мобильных приложений с использованием React
Если вы уже умеете работать с React, создание мобильных приложений для iOS и Android - это новое приключение, в котором вы сможете применить свои...
Хуки React: что это такое и как их использовать
Хуки React: что это такое и как их использовать
Хуки React - это мощная функция библиотеки React, которая позволяет разработчикам использовать состояние и другие возможности React без написания...
4
0
1 393
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Мне удалось просмотреть данные с помощью JSON.stringify.

  JSON.stringify(store.getState())

он возвращает данные json. использование этого метода упрощает просмотр объектов

Вы используете combineReducers для создания rootReducer.

The state produced by combineReducers() namespaces the states of each reducer under their keys as passed to combineReducers()

Итак, store.getState() вернет такой объект

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

Чтобы обратиться к isLoggedIn, вы должны сделать alert(state.auth.isLoggedIn);

Спасибо, это работает. еще вопрос, почему возвращаемое состояние не обновляется? надеюсь, у вас есть время, чтобы ответить на это. Спасибо

pikanerd 29.05.2019 05:24

Другие вопросы по теме

Есть ли способ протестировать издевательскую функцию, а затем фактическую в том же тестовом файле на Jest?
Должен ли я обновлять состояние редукторов для определенного компонента или управлять состоянием компонента?
Как добавить или удалить элемент из массива состояний в реакции
Как предотвратить повторный рендеринг компонента при использовании redux/reselect?
Как преобразовать возвращаемый тип в void, используя типы Redux?
Объекты недействительны в качестве дочерних элементов React (найдено: объект с ключами {}). Если вы хотели отобразить коллекцию дочерних элементов, используйте вместо этого массив
Redux Reselect — селектор с вводом аргумента пересчитывается
Redux-Thunk не может получить реквизиты в компоненте
Как выполнить цикл через массив MongoDB с помощью React JS для рендеринга таблицы?
Привязка избыточной формы input.value к средству выбора даты и времени