使用多個反應應用在網頁有關商店

Question

我有一個評論的應用程序做出反應：

require('console-polyfill') 
import 'babel-polyfill' 
import React from 'react' 
import ReactDOM from "react-dom" 
import App from "./app/app.js" 
import { makeid } from "shared/services/helpers.js" 
import { Provider } from "react-redux" 
import store from "./app/services/store.js" 
require('./app/scss/main.scss') 

window.R_loadReactComment = function(element){ 
    new ReactDOM.render(<Provider store={store}><App /></Provider>, element); 
} 

在模板文件中，我可以呈現在調用此應用程序像這樣：

$(function(){ 
     if($(".ordered_react_comment").length){ 
      var elements = document.getElementsByClassName("ordered_react_comment"); 
      for (var x = 0; x < elements.length; x++) 
       window.R_loadReactComment(elements[x]); 
     } 
    }) 

它按預期呈現，但當我點擊按鈕以顯示評論應用程序時，此評論應用程序的所有反應實例都會顯示！我猜這最可能的原因是因爲他們都在分享和改變同一家商店。我不希望發生這種情況，我希望每個反應應用都有自己的商店。我如何獲得它，以便每個應用程序都有自己的商店（如果這是這裏的問題）。

Answer 1

JavaScript模塊是單身人士。你可以閱讀更多here。

模塊是單身人士。即使一個模塊被多次導入， 也只有它的一個「實例」存在。

因此import store from "./app/services/store.js"每次都會給你同樣的商店。

爲避免這種情況，請導入一個創建商店實例的功能，並將實例傳遞給您的提供商。

作爲目前的例子，您的商店可能是這樣的。

// create store 

export default store; 

你需要在函數中包裝這個函數並返回該函數。

function getNewStore() { 
    // create store 
    return store 
} 

export default getNewStore; 

現在你可以每次使用這個函數來創建一個新的商店實例。

import getNewStore from "./app/services/store.js" 

//... 

window.R_loadReactComment = function(element){ 
    const store = getNewStore(); 
    new ReactDOM.render(<Provider store={store}><App /></Provider>, element); 
}