Как получать значение из store через react-router?

Question

[hollanditkzn]

НЕ пойму как получать значение через роутеры
Мой код index.js

import 'babel-polyfill';
import React from 'react';
import ReactDOM from 'react-dom';
import  { Provider } from 'react-redux';
import { createStore, combineReducers, compose, applyMiddleware } from 'redux';
import { Route, Switch, Redirect } from 'react-router';
import { BrowserRouter } from 'react-router-dom';
import thunk from 'redux-thunk';
import loginReducer from './redux/login/loginReducer';
import AuthProvider from './containers/AuthProvider';
import Home from "./component/Home";
import Auth from "./AuthForm";
import { WithHelmet, withHelmet } from './utils/WithHelmet';

const rootReducer = combineReducers({
    login: loginReducer,
});

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(rootReducer, composeEnhancers(
    applyMiddleware(thunk)
));

ReactDOM.render(
        <div>
          <Provider store={store}>
            <BrowserRouter>
              <AuthProvider authComponent={withHelmet({ title: 'Авторизация'})(Auth)}>
                <Route path='/' strict>
                  <WithHelmet title='Главная страница'>
                    <Home />
                  </WithHelmet>
                </Route>
              </AuthProvider>
            </BrowserRouter>
          </Provider>
        </div>,
    document.getElementById('content')
);

component/Home.js

import React, {Component} from 'react';
import Header from './Header';
import { connect } from 'react-redux';

class Home extends Component{
    render(){
        const { user } = this.props;
        return(
            <div>
                <Header/>
                <h1>Добро пожаловать</h1>
                <div>ФИО: {user}</div>
                <div>Должность: </div>
            </div>
        );
    }
}
const mapStateToProps = state => {
    user: state.login.user
};

export default connect(mapStateToProps)(Home);

Вот в state.login.user находится данные {id: 1, login: "admin", name: "Иван Иванович"}
Но как мне его перевести const { user } = this.props;ведь там dispatcher пуст.
Сразу говорю что я новичок и немного не втыкаю как я должен получить в компоненте эти значение
Вот полный код на гитхабе если что https://github.com/hollandit/trainingPortal/tree/m...

Comments

[Антон Спирин]

а в чем сейчас проблема?

[hollanditkzn]

Антон Спирин, Я не могу вывести данные которые в state находятся. Как понимаю это хранилище и сейчас же я могу обраться к хранилище чтобы их вывести в ФИО, там name находится. То есть сейчас она находится в state.login.user.name и так далее. Или это не так делается?

[hollanditkzn]

если выводить this.props.user то там ничего нет. Только мне не понятно как это делается

[Антон Спирин]

hollanditkzn, у вас сервер точно пользователя отдает?
Проверьте ответ сервера, а так же зайдите в ReduxDevTools и посмотрите, что у вас в store.

[hollanditkzn]

Антон Спирин, ReduxDevTools почему то на linux у меня он не так пашет, он ничего не показывает что отдает. А так разобрался надо вернуть значение, типо вот так сделать

const mapStateToProps = state => {
    return {
        user: state.login.user
    }
};

[Антон Спирин]

hollanditkzn, да у вас там ошибка, лучше так:

const mapStateToProps = state => ({
    user: state.login.user,
});

Меньше символов и читабельней получается.

И лучше вам использовать селекторы.

[hollanditkzn]

Антон Спирин, Да просто проект надо быстрее сдавать хотя бы рабочую версию сделать, а потом усовршенствовать его

Answer 1

[hollanditkzn]

сonst mapStateToProps = state => ({
    user: state.login.user,
});