Question

我是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”。

您可以在控制台中看到商店正在更改，但是“ DASHBOARD”副本没有反映出来。

已解决 我用下面的代码来工作。感谢您的所有帮助！

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);

Answer 1

由于您尝试从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>

React Redux Store更新-更改不会更新组件

1 个答案: