React Redux Store Updates - Изменения не обновляют компонент - PullRequest
Новая
       71

React Redux Store Updates - Изменения не обновляют компонент

1 голос
/ 23 сентября 2019

Я новичок в Redux, использую его с React, и мне нужна помощь.У меня есть меню, которое при нажатии на пункт меню, другой компонент должен обновить некоторые копии.Я могу отправить действие и получить обновление магазина.Однако я не могу заставить дочерний компонент (HeroText) отображать новое значение хранилища в методе store.subscribe при изменении значений хранилища.Пожалуйста, помогите и спасибо! 

import React, { Component } from "react";
import ReactDOM from "react-dom";
import HeroText from "../presentational/HeroText.jsx";
import bgImage from "../../../images/forest_fog.jpg";
import AnantaNavbar from "../presentational/AnantaNavbar.jsx";
import '../../../scss/hero.scss';
import store from '../../store/index';
import { connect } from "react-redux";


const mapStateToProps = state => {
    return {
        contact: state.contact,
        heroText: state.heroText
    }
}

class HeroContainer extends Component {
  constructor(props)
  {
    super(props);

    this.state = store.getState();

    store.subscribe(() => {
        console.log(store.getState().heroText);
        this.setState({
            heroText: store.getState().heroText,
        })
    })
  }

  render()
  {
    return (
        <div id="hero-container" style={{backgroundImage: ("url(" + bgImage + ")") || ""}}>
            <div className="container">
                <HeroText text={this.props.heroText}>
                    Welcome back {this.props.contact.full_name}
                </HeroText>

                <AnantaNavbar></AnantaNavbar>
            </div>
        </div>
    );
  }
}

export default connect(mapStateToProps)(HeroContainer);

ОБНОВЛЕНИЕ Ниже находится мой родительский контейнер приложений с провайдером 

import React, { Component } from "react";
import ReactDOM from "react-dom";
import { Navbar, NavbarBrand, NavbarNav, NavbarToggler, Collapse, NavItem, NavLink, Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'react-bootstrap';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import LoginContainer from '../../../js/components/container/LoginContainer.jsx';
import DashboardContainer from '../../../js/components/container/DashboardContainer.jsx';
import HomeContainer from '../../../js/components/container/DashboardContainer.jsx';
import ProfileContainer from '../../../js/components/container/ProfileContainer.jsx';
import HeroContainer from "./HeroContainer.jsx";
import '../../../scss/globals.scss';
import logo from '../../../images/logo1.png';
import { Provider } from 'react-redux';
import store from '../../store/index';

const Router = () => (
    <BrowserRouter>
        <Switch>
            <Route exact path="/" component={LoginContainer} />
            <Route exact path="/login" component={LoginContainer} />
            <Route exact path="/home" component={HomeContainer} />
            <React.Fragment>
                <HeroContainer />
                <Route path="/dashboard" component={DashboardContainer} />
                <Route path="/profile" component={ProfileContainer} />
            </React.Fragment>
        </Switch>
    </BrowserRouter>
);

class AppContainer extends Component {
  constructor(props)
  {
    super(props);
    this.state = {

    };
  }

  componentDidMount()
  {

  }

  render()
  {
    return (
        <div>
            <Provider store={store}>
                <Router></Router>
            </Provider>
        </div>
    );
  }
}

export default AppContainer;

По умолчанию heroText в магазине говорит "DASHBOARD".При нажатии на пункт меню, в данном случае ссылку на / profile, heroText должен обновиться до «PROFILE» после обновления магазина.

enter image description here

В консоли видно, что хранилище меняется, но копия «ДАННАЯ ПЛАТА» не отображается.

РАЗРЕШЕНО Я получил это, работая с кодом ниже.Спасибо за помощь! 

import React, { Component } from "react";
import ReactDOM from "react-dom";
import HeroText from "../presentational/HeroText.jsx";
import bgImage from "../../../images/forest_fog.jpg";
import AnantaNavbar from "../presentational/AnantaNavbar.jsx";
import '../../../scss/hero.scss';
import store from '../../store/index';
import { connect } from "react-redux";


const mapStateToProps = state => {
    return {
        contact: state.contact,
        heroText: state.heroText
    }
}

class HeroContainer extends Component {
  constructor(props)
  {
    super(props);
  }

  render()
  {
    return (
        <div id="hero-container" style={{backgroundImage: ("url(" + bgImage + ")") || ""}}>
            <div className="container">
                <HeroText text={store.getState().heroText}>
                    Welcome back {store.getState().contact.full_name}
                </HeroText>

                <AnantaNavbar></AnantaNavbar>
            </div>
        </div>
    );
  }
}

export default connect(mapStateToProps)(HeroContainer);

1 Ответ

0 голосов
/ 23 сентября 2019

Поскольку вы пытаетесь получить состояние от Redux, нет смысла сохранять его в локальном состоянии.Кроме того, вам не нужно использовать store.getState, connect уже делает это за вас. 

const mapStateToProps = state => {
  return {
    contact: state.contact,
    heroText: state.heroText
  }
}

class HeroContainer extends Component {
  render() {
    return (
      <div id="hero-container" style={{backgroundImage: ("url(" + bgImage + ")") || ""}}>
        <div className="container">
          <HeroText text={this.props.heroText}>
            Welcome back {this.props.contact.full_name}
          </HeroText>

          <AnantaNavbar></AnantaNavbar>
        </div>
      </div>
    );
  }
}

export default connect(mapStateToProps)(HeroContainer);

Вам также необходимо убедиться, что ваше приложение упаковано в провайдера, например: 

  <Provider store={store}>
    <App />
  </Provider>
...