为什么反应热加载程序仅适用于热(模块)(应用程序)并重置其他减速器状态

Question

我的项目中有相当旧的依赖项，所以我决定更新所有这些依赖项。我面临的问题与 React 热加载程序有关。现在热加载与我的应用程序组件一起工作，我用 hot(模块((应用程序(装饰。在其他组件/路由中，热加载工作，但重置所有化简器的状态，因此 Web 应用程序重定向到登录页面auth因为 prop 被重置并且从未更改。

应用组件：

class App extends Component {
  state={
    loggedIn:false,
    state1:false,
    state2:false,
    state3:false,
  }
  componentDidUpdate(prevProps) {
    console.log('apploggedIn', this.props.loggedIn, prevProps.loggedIn)
    this.props.loggedIn!==prevProps.loggedIn&&this.setState({loggedIn:this.props.loggedIn})
  }
  componentDidMount() {
     // console.log('didmount', this.props)
    this.props.token&&this.props.dispatch(actions.getAttornies(this.props.token))
    this.props.token&&this.props.dispatch(actions.getProviderList(this.props.token)) 


  }
  componentWillMount() {
    this.props.dispatch(actions.isLoggedIn())
  componentWillReceiveProps(nextProps) {
    console.log('nextprops',nextProps)
    if (this.props.token!==nextProps.token) {
      nextProps.token&&nextProps.dispatch(actions.getAttornies(nextProps.token))
      nextProps.token&&nextProps.dispatch(actions.getProviderList(nextProps.token))
    }
  }
  onUnload(){
    this.props.router.push('/')
  }
  onLogin(e) {
    this.props.dispatch(actions.signIn(e.login,e.password))
  }
  render() {
    const { location, children, dispatch, loggedIn, alert } = this.props;
    console.log("AppProps", this.props)

          return <div className="vbox container-fluid">
            <div className="row">
                <section className="hbox stretch" style={{width:'100%', background:'#f3f4f8'}}>
                    <section id="content">
                      <Header
                          router={this.props.history}
                          dispatch={this.props.dispatch}
                          openModal={(e)=>this.openModal(e)}/>
                      <div className="row"
                      >
                      <div className="col-12" style={{minHeight:'90vh'}}>
                        <Switch>
                          <PrivateRoute exact path="/"  component={Startpage} />
                          <Route
                              component={PatientSearch}
                              path="/patient/search"
                          />
                          <PrivateRoute
                              component={Technician}
                              path="/technician"
                          />
                          <Route
                              component={Login}
                              path="/login"
                          />
                          <Route
                              component={Analytics}
                              path="/analytics"
                          />
                          <Route
                              component={Notes}
                              path="/notes"
                          />
                          <Route
                              component={DeliveryReports}
                              path="/delivery_reports"
                          />
                        </Switch>
                      </div>
                      </div>
                    </section>
                </section>
            </div>
          </div>
      }      
  // }
}
const mapStateToProps=(state)=>{
  return {
    loggedIn: state.app.loggedIn,
    token: state.app.token,
    isLoading: state.loading.loading,
    alert:state.alert
  };
}
export default withRouter(connect(mapStateToProps)(hot(module)(App)));

根组件：

const store = configureStore(/* provide initial state if any */)
const PrivateRoute = ({ component: Component, authed, ...rest }) => (
    <Route {...rest} render={(props) => (
        authed === true
            ? <Component {...props} />
            : <Redirect to={{
              pathname: '/login',
              state: { from: props }
            }} />
    )} />
)
class Root extends Component {
  state = {loggedIn:false}


  render() {
    return (
      <Provider store={store}>
        <ConnectedRouter history={history}>
          <Router >
            <App>
            </App>

          </Router>
        </ConnectedRouter>
       </Provider>
    );
  }
}
export default (Root)

最低级别组件索引.js

import "babel-polyfill";
import React from 'react';
import ReactDOM from 'react-dom';
import Root from './containers/Root';
import configureStore from './store/configureStore'
import { AppContainer } from 'react-hot-loader';
const store = configureStore();

const render = Component => {
  ReactDOM.render(
    <AppContainer>
      <Component />
    </AppContainer>,
    document.getElementById('wrapperContainer'),
  );
};
render(Root)
if (module.hot) {
  module.hot.accept('./containers/Root', () => {
    const NextRootContainer = require('./containers/Root').default;
    render(NextRootContainer);
  });
}

配置商店部件：

import { createStore, applyMiddleware, combineReducers, compose } from 'redux';
import thunkMiddleware from 'redux-thunk';
import { connectRouter } from 'connected-react-router'
import promiseMiddleware from '../middleware/promiseMiddleware';
import loggerMiddleware from 'redux-logger';
import * as reducers from '../reducers/';
import { reducer as formReducer } from 'redux-form'
import app from '../reducers/app'
import {createBrowserHistory} from "history";
export const history = createBrowserHistory()
const reducer = combineReducers({...reducers.default, router:connectRouter(history), form:formReducer });
const createStoreWithMiddleware = applyMiddleware(
    thunkMiddleware,
    promiseMiddleware
)(createStore);
export default function configureStore(initialState) {
    const store =  createStoreWithMiddleware(
        reducer,
        initialState,
        window.devToolsExtension && window.devToolsExtension()
    );
    if (module.hot) {
        module.hot.accept('../reducers', () => {
            const nextRootReducer = require('../reducers/index').default
            store.replaceReducer(nextRootReducer);
        });
    }
    return store;
}

我真的很抱歉淹没了这么多代码，但我真的不知道这里出了什么问题。

Answer 1

• 具有钩子热重载支持的最小 React-Hot-loader 版本 - 4.9.0，下面的任何内容都不会更新它们(除非必须重新运行效果的情况(。
• 具有钩子重新排序支持的最小 React-Hot-loader 版本 - 4.11.0，如果您添加/删除或移动钩子，下面的任何内容都会抛出。

正如您在 RHL 的票证中提到的 - 您使用的是 4.3.0。