1

我正在尝试在 Redux 计数器示例（移植到打字稿）上使用 react-hot-loader v3 设置 HMR。

HMR 实际上似乎工作，因为页面更新，但第一次更新总是抛出warning.js?8f69:14 <Provider> does not support changing `store` on the fly. It is most likely that you see this error because you updated to Redux 2.x and React Redux 2.x which no longer hot reload reducers automatically. See https://github.com/reactjs/react-redux/releases/tag/v2.0.0 for the migration instructions. 奇怪的是，后续更新不会抛出这个（并继续工作），直到我重新加载页面。

我相信我已经按照所有文档所说的方式进行了设置，但我无法弄清楚为什么会发生这种情况。我希望有人遇到过这个。

索引.ts

const store: Store<IAppState> = configureStore();
const rootEl = document.getElementById('root');

let render = () => {
    ReactDOM.render(
        <AppContainer>
            <Root store={ store }/>
        </AppContainer>,
        rootEl
    );
};

if (process.env.NODE_ENV !== 'production') {
    if ((module as any).hot) {
        (module as any).hot.accept(() => {
            setTimeout(render);
        });
    }
}

render();

根.ts

let Root = (process.env.NODE_ENV === 'production') ?
    RootProd :
    RootDev;

export default Root;

根.dev.ts

export default class RootDev extends React.Component<IRootProps, void> {
  render() {
    const { store } = this.props;

    return (
      <Provider store={store}>
        <div>
          <CounterApp />
          <DevTools />
        </div>
      </Provider>
    );
  }
}

配置存储.ts

let configureStore = (process.env.NODE_ENV === 'production') ?
    configureStoreProd :
    configureStoreDev;

export default configureStore;

configureStore.dev.ts

const composeEnhancers = (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const enhancer = composeEnhancers(
    applyMiddleware(thunk.default),
    DevTools.instrument(),
    persistState(
        window.location.href.match(/[?&]debug_session=([^&#]+)\b/) ?
            window.location.href.match(/[?&]debug_session=([^&#]+)\b/)[0] :
            'defaultDevSession'
    )
);

export default function configureStoreDev():Store<IAppState> {
    const store = createStore<IAppState>(rootReducer, enhancer);

    if ((<any>module).hot) {
        (<any>module).hot.accept('../reducers', () => {
            console.log('replaceReducer');
            store.replaceReducer(require('../reducers').rootReducer)
        });
    }

    return store;
}

如果粘贴的代码不够用，整个项目都在这里：https ://github.com/japhar81/redux_template

4

0 回答 0