Как обратиться к state редакса из App.js?

Question

[shading]

Хочу в App.js сделать проверку, если стейт isLogged в редюсере == false, то выводить окно авторизации, иначе что-то другое

{ store.auth.state.isLogged
                    ? <AuthContainer/>
                    : null
                }

Как обратиться к auth.state.isLogged из App.js и правильно ли вообще так делать?
Сылка на гит - https://github.com/Shading29/tosterr

Answer 1

[Denis Minimal]

Инициализируй стор в index.js и оберни App в провайдер и будет у тебя доступ к стору из App

ReactDOM.render( <Provider store={store}><App /></Provider> , document.getElementById('root'));

Comments

[shading]

Само тело App обвернуто в провайдер

const store = createStore(rootReducer)

function App() {
  return (
      <Provider store={store}>
            <div className="container">
                {/*<AuthContainer/>*/}

                { store.auth.state.isLogged
                    ? <AuthContainer/>
                    : null
                }

            </div>
      </Provider>
  );
}

Попробовал обернуть index, всё равно не пойму, как обращаться к стейту

[Denis Minimal]

Вот так должен выглядеть твой файл index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import * as serviceWorker from './serviceWorker';
import {createStore} from "redux"
import {Provider} from "react-redux"
import rootReducer from "./store/reducers"

const store = createStore(rootReducer);

ReactDOM.render( <Provider store={store}><App /></Provider> , document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.register();

А так App.js

import React from 'react';
import './App.css';
import "./css/style.css";
import { connect } from 'react-redux';
import AuthContainer from "./components/Auth/AuthContainer";


function App({isLogged}) {
  return (
        <div className="container">
                {/*<AuthContainer/>*/}

                { isLogged
                    ? <AuthContainer/>
                    : null
                }
        </div>
  );
}

function mapStateToProps (state) {
  return {
    isLogged: state.auth.state.isLogged
  }
}

export default connect()(App);

Вроде написал правильно) Здесь вся фишка в функции connect в которую ты оборачиваешь компонент App (в самом низу файла App.js)

[shading]

Денис Середа, Понял, я думал, что можно обратиться к стейту без коннекта в компоненте.где был инициализирован стор. Скорее всего можно, но врятли стоит это делать, раз такого нет в документации