Redux не может получить состояние из магазина

Question

Edit: я на самом деле застрял здесь, не могу решить это самостоятельно, и простое исправление кода очень помогло бы.

В настоящее время я работаю над проектом и мне нужно использовать redux-storeя пытаюсь передать значение prop из app.js в AppRouter.js, но когда я пытаюсь получить доступ к значению prop, войдя в консоль или отобразив его;я получаю неопределенную ошибку как в журнале консоли, так и внутри значения рендеринга:.Как я могу преодолеть это?Любая помощь приветствуется.

Вот мой app.js

import React from 'react';
import ReactDOM from 'react-dom';
import {AppRouter} from './routers/AppRouter.js';
import {Provider} from 'react-redux';
import {createStore} from 'redux';


const initialState = {
    login: true,
    value: "10"
  };

const reducer = (state = initialState, action) => {
    if(action.type === "loginTrue") {
      return {
        login: true,
        value: "10"
      };
    }

    else{
        return {
        login: true,
        value: "10"
      };

    }
    return state;
};



const store = createStore(reducer,initialState);

store.dispatch({type: "loginTrue"});


const jsx = (
    <Provider store={store}>
    <AppRouter/>
    </Provider>
);

ReactDOM.render(jsx,document.getElementById('app'));

Вот мой AppRouter

import {Router, Route, Switch} from 'react-router-dom';
import React from 'react';
import {DashBoard} from '../components/DashBoard.js';
import {Login} from '../components/Login.js';
import {SignUp} from '../components/SignUp.js';
import {NotFoundPage} from '../components/NotFoundPage.js';
import {Header} from '../components/Header.js';
import {LoginSuccess} from '../components/LoginSuccess';
import {Failed} from '../components/Failed';
import createHistory from 'history/createBrowserHistory';
import {connect} from 'react-redux';

export const history = createHistory();

export class AppRouter extends React.Component {
    constructor(props){
        super(props);
    }

    render() {
        console.log("val "+ this.props.value);  //output val undefined
      return(

    <Router history={history}>
    <div>
        <Header />
        value: {this.props.value}                //outputs value : 
    <Switch>
        <Route path="/" component={DashBoard} exact={true}/>
        <Route path="/login" component = {Login} />
        <Route path="/signup" component = {SignUp}/>
        <Route path="/loginSuccess" component = {LoginSuccess}/>
        <Route path="/failed" component = {Failed}/>
        <Route component = {NotFoundPage} />

    </Switch>
     </div>
    </Router>
    )
  }

};

const mapStateToProps = (state) =>{
    return {
        value: state.value
    };
};

export default connect(mapStateToProps)(AppRouter);

Answer 1

В AppRouter.js, поскольку у вас нет переменной mapDispatchToProps, попробуйте дать второй аргумент метода "connect" null

const mapStateToProps = (state) =>{
    return {
        value: state.value
    };
};

export default connect(mapStateToProps, null)(AppRouter);

Answer 2

проблема в том, что вы не можете правильно получить состояние избыточности, потому что ваш подключенный AppRouter это экспорт по умолчанию, но в вашем App.js вы используете именованный импорт:

import {AppRouter} from './routers/AppRouter.js';

который является неподключенным компонентом, исправьте импорт следующим образом:

import AppRouter from './routers/AppRouter.js';

будьте осторожны с экспортом и импортом, эта ссылка может помочь: https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export cheers

Answer 3

Вы не передаете значение в AppRouter и поэтому не получаете значение в компоненте AppRouter.То, что вам нужно сделать, это передать значение в виде prp в AppRouter со значением подкачки, как показано ниже

app.js

import React from 'react';
import ReactDOM from 'react-dom';
import {AppRouter} from './routers/AppRouter.js';
import {Provider} from 'react-redux';
import {createStore} from 'redux';


const initialState = {
    login: true,
    value: "10"
  };

const reducer = (state = initialState, action) => {
    if(action.type === "loginTrue") {
      return {
        login: true,
        value: "10"
      };
    }

    else{
        login: true
    }
    return state;
};



const store = createStore(reducer,initialState);
console.log(store.getState());

const jsx = (
    <Provider store={store}>
    <AppRouter value={initialState.value}/>
    </Provider>
);

ReactDOM.render(jsx,document.getElementById('app'));

Теперь в AppRouter.js вы получите this.props.value