Question

我有一个简单的应用程序，其中包含登录，ReleaseList和AddRelease几个组件。这些组件是分开的，它们之间共享一个Redux存储，以基于存储中的控件属性来控制UI（显示/隐藏内容）。

当使用者单击登录按钮时，我希望该应用将页面重定向到另一个页面，用户可以在其中看到用户列表。我使用函数 updateStore（）更新Redux存储并按照以下代码进行重定向：

/Login.js 快照

updateStore(loggedIn,history) {
    const action = { type: loggedIn };
    store.dispatch(action);
    if (loggedIn === "LOGGED_IN") {

history.push（“ / App”）;

       //window.location.href = "/App";
       console.log("history : ", history);
    } else {

    }
  }

但是/ App页面没有被重新渲染？我试图查看/ App组件上是否有任何方法被调用，但是除以下方法外，没有其他方法被调用，看来使用它是不安全的

/App.js 快照

 componentWillUpdate(nextProps, nextState) {
         //It is unsafe to use this method
  }

（1）有什么方法可以强制/ App重新呈现而不失去存储状态？我从窗口对象使用JavaScript重定向，它迫使页面刷新，并且Redux存储失去了状态。

（2）我知道将状态作为属性传递给子组件，但是我不想走那条路，因为Redux可能会提供一个保存状态的地方。

./ App.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Login from './Login.js';
import AddRelease from './AddRelease.js';
import Home from './Home.js';
import ReleaseList from './ReleaseList.js';
import {listReleases} from './firebase_db.js';
import Nav from './Nav';
// Add these imports - Step 1
import { store } from "./redux";

class App extends Component {

  constructor(props) {
      super(props);
      console.log("store.getState() : ", store.getState().authenticated.loggedIn);
      this.state = {
          loggedIn: store.getState().authenticated.loggedIn,
          releaseAdded:false,
          releases: {}
      };

      // This binding is necessary to make `this` work in the callback
      this.myCallback = this.myCallback.bind(this);
  }

  componentDidMount() {
    console.log("store.getState() : ", store.getState().authenticated.loggedIn);
        var releases = listReleases(this.myCallback);
    console.log("componentDidMount : ");
    console.log(releases);

    this.unsub = store.subscribe(() => {
      this.setState({
        loggedIn: store.getState().authenticated.loggedIn
      });
    });

    this.setState({ 
        releases : releases
    });
  }

  componentWillUnmount() {
    console.log("componentWillUnmount >>>>");
    this.unsub();
  }

  componentWillReceiveProps(nextProps) {
         console.log("componentWillReceiveProps >>>>", nextProps);
  }

  componentWillUpdate(nextProps, nextState) {
         //It is unsafe to use this method
  }

  render() {
      var releases = this.state.releases;
      return (
        <div className="App">
          {/* Since React runs through a component each time state has been changed, 
              we can add a conditional that will display the component if isHidden is set to false.
              Source : https://eddyerburgh.me/toggle-visibility-with-react */ }
          {/* !this.state.loggedIn && <Login callbackFromParent={this.myCallback} /> */}
          <header className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            <h1 className="App-title">React and Firebase</h1>
          </header>
          <Nav/>
          <ReleaseList releases={releases} loggedIn={this.state.loggedIn}/>
        </div>
      );
    }

}

export default App;

如何强制从Redux存储更新组件状态？

0 个答案: