終極版+童話拋出警告有關更改店上飛甚至module.hot implemtended

Question

我使用的是故事書，我想補充終極版作爲裝飾。 WHE運行的故事書，我被警告在控制檯：

<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. 

這是我的配置童話代碼：

/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */ 

import React from 'react'; 
import { configure, storiesOf } from '@storybook/react'; 
import { Provider as ReduxProvider } from 'react-redux'; 
import forEach from 'lodash/forEach'; 
import unset from 'lodash/unset'; 
import Provider from 'components/Provider'; 
import initStore from 'utils/initStore'; 
import messages from '../lang/en.json'; 

const req = require.context('../components', true, /_stories\.js$/); 

const ProviderDecorator = (storyFn) => { 
    const TheProvider = Provider(() => storyFn()); 

    return (
    <ReduxProvider store={initStore()}> 
     <TheProvider key={Math.random()} now={1499149917064} locale="en" messages={messages} /> 
    </ReduxProvider> 
); 
} 

function loadStories() { 
    req.keys().forEach((filename) => { 
    const data = req(filename); 

    if (data.Component !== undefined && data.name !== undefined && data.stories !== undefined) { 
     const Component = data.Component; 

     const stories = storiesOf(data.name, module); 

     stories.addDecorator(ProviderDecorator); 

     let decorator = data.stories.__decorator; 

     if (data.stories.__decorator !== undefined) { 
     stories.addDecorator((storyFn) => data.stories.__decorator(storyFn())); 
     } 

     forEach(data.stories, (el, key) => { 
     if (key.indexOf('__') !== 0) { 
      stories.add(key,() => (
      <Component {...el} /> 
     )); 
     } 
     }); 
    } else { 
     console.error(`Missing test data for ${filename}!`) 
    } 

    }); 
} 

configure(loadStories, module); 

和initStore文件：

import { createStore, applyMiddleware } from 'redux'; 
import { composeWithDevTools } from 'redux-devtools-extension'; 
import thunkMiddleware from 'redux-thunk'; 
import { persistStore, autoRehydrate } from 'redux-persist'; 

import reducers from 'containers/redux/reducers'; 

export default() => { 
    const store = createStore(
    reducers, 
    {}, 
    composeWithDevTools(applyMiddleware(thunkMiddleware), autoRehydrate()), 
); 

    if (module.hot) { 
    // Enable Webpack hot module replacement for reducers 
    module.hot.accept('../containers/redux/reducers',() => { 
     const nextReducers = require('../containers/redux/reducers'); // eslint-disable-line global-require 
     store.replaceReducer(nextReducers); 
    }); 
    } 

    persistStore(store); 

    return store; 
}; 

因此，大家可以看到我跟着來自警告鏈接的指示。我做了什麼錯誤，我該如何刪除此警告？我知道它不會顯示在生產服務器上，但它在開發模式下非常煩人。 ：/

Answer 1

出現這種情況的原因與童話故事的方式熱負荷做。

當你改變你的故事，該模塊是熱裝，這意味着裏面的代碼被再次執行。

由於您使用的是商店創建者函數，而不是來自另一個模塊的商店實例，因此熱負載傳遞至ReduxProvider的實際商店對象每次都是新的。

但是，重構的React樹大部分是完全相同的，這意味着ReduxProvider實例會使用新的道具重新渲染，而不是重新創建。

從本質上講，這正在改變它的商店。

的解決是確保ReduxProvider實例是新的，同樣，在熱負荷。這是很容易通過它獨特的key道具解決，例如：

const ProviderDecorator = (storyFn) => { 
    const TheProvider = Provider(() => storyFn()); 

    return (
    <ReduxProvider key={Math.random()} store={initStore()}> 
     <TheProvider key={Math.random()} now={1499149917064} locale="en" messages={messages} /> 
    </ReduxProvider> 
); 
} 

從React Keys：

鍵幫助陣營識別哪些項目已經改變，添加或移除。應該給數組內的元素賦予元素一個穩定的標識。