Как получить сохраненные данные из store.getState ()

Question

Я использую реагировать с редуксом в первый раз.

В рендере моего приложения, если я консоль журнала store.getState(), я вижу сохраненные данные {username: 'foo', password: 'bar'}

, но когда я хочу получить данные, такие как store.getState().password

Я получаю undefined error. Я пытаюсь передать эти данные своим компонентам для частного маршрута следующим образом:

внутри PrivateRoute. Затем я пытаюсь проверить, вошел ли пользователь в систему или нет, чтобы отправить его на панель управления

Итак, как мне получить данные для передачи на мой реквизит?

даже const { isLoggedIn, username } = store.getState() не работает, он показывает

Свойство isLoggedIn не существует для типа {}

Кстати, я знаю, что это может быть плохо, но этомое первое приложение реагировать, поэтому я пытаюсь выучить избыточный

Answer 1

если вы вызываете магазин из приложения реагирования, вы должны использовать провайдера и передать хранилище в приложение реагирования, а затем связать состояние, действия и / или методы магазина с реквизитами реагирования, как показано в этой ссылке

connect https://react -redux.js.org / 5.x / api / connect

, но если вы используете приставку в обычном JavaScriptтогда он будет работать нормально.

пример в реаги

сначала

import { Provider } from 'react-redux'
import { store } from "store";

ReactDOM.render(
    <Provider store={store}>
      <YourReactApp/>  // e.g <Container />
    </Provider>, document.getElementById('root')
);

, затем вы можете привязать что угодно из своего магазина к реагирующему компоненту, подобному этому

 import { connect } from "react-redux";

    const mapStateToProps = (state) => {
      const { isLoggedIn, username }= state
      return {
        isLoggedIn,
  username
      };
    };

    const mapDispatchToProps = (dispatch :any) => {
        return {
          login: ()=> { 
            return dispatch(your action creator)
          }
        }
      }



    const Containter = connect(mapStateToProps,mapDispatchToProps)(AnyReactComponentYouWantToPassThisStore);

    export default Containter;

если вы можете использовать его на своей странице следующим образом

function AnyReactComponentYouWantToPassThisStore (props){
  return(
<div> {props.username}  </div>
)
}

, то вместо звонка <AnyReactComponentYouWantToPassThisStore />

теперь используйте <Container />