我們可以編寫不同的Redux應用程序來創建更大的應用程序嗎？

我正在構建一個redux應用程序，但範圍發生了變化，所以現在我必須將我的應用程序移到另一個應用程序中，以至於它也是一個應用程序。我們可以編寫不同的Redux應用程序來創建更大的應用程序嗎？

這看起來是這樣的：

<MainApp > 
    <components /> 
    <MyApp props={myAppProps} /> 
</MainApp>

我發現的主要問題是如何處理與對myApp的商店屬性更改。

所以我的疑惑是：

是否有處理不同Redux的應用正確的方法是什麼？
我們如何拆分一個巨大的應用程序，以便我們可以獨立開發其不同部分？

來源

2016-07-04 carlesba

你有什麼問題？我不明白「myApp商店如何處理財產變更」的含義。你能展示一個你正在努力的具體例子嗎？ –

假設我有一個可以處理文件並編輯其內容的應用程序。所以我有2個應用程序，一個是處理文件的主要應用程序，另一個是編輯器本身。 '' 主應用程序會將文件的內容傳遞給編輯器，但編輯器擁有基於此文件的自己的存儲區。這家商店可以處理插入符號的位置，而類似的東西，但主應用程序不會意識到這一點。實際上，MainApp可以更改編輯器的內容，並且該商店將被重置。 – carlesba

@DanAbramov也許我的回答更好地解釋了這種情況。但我不確定''可以處理：http://stackoverflow.com/questions/38187722/could-we-compose-different-redux-applications-to-create-a-bigger-one/38188580# 38188580 – carlesba

究竟是終極版應用程序在你的看法？

終極版，不過是爲了你的應用程序數據管理解決方案：

如果你有兩套與combineReducers()

rootReducerForApp = combineReducers({reducer1, reducer2, reducer3}); 
rootReducerForSomeThingElse = combineReducers({r1, r2, ...});

創建你可以結合這些，並有一個減速機爲您的應用

減速器

combindedRootReducer = combineReducers({ 
    rootReducerForApp, 
    rootReducerForSomeThingElse 
})

然後用

創建單一商店

let store = createStore(combinedRootReducer)

現在你可以使用所有你需要爲您的的行爲語義來自同一個地方

來源

2016-07-04 20:33:58 webdeb

是的，這是有道理的，但它不是一個完整的解決方案。你如何處理行爲。我假設我們應該將商店傳遞給每個子應用程序，然後他們可以將動作分派給主商店。我認爲這可以工作。 – carlesba

@ carlesba你的所有行爲都將傳遞給你所有的減速器..像往常一樣 – webdeb

這裏有一個可能的解決方案。假設我們有一個使用編輯器的應用程序。兩者都是不同的應用程序，但MainApp可以通過文件編輯到編輯。組件將如下所示：

<MainApp> 
    <Editor 
    content={fileContent} 
    author={fileAuthor} 
    onSubmitFile={(f) => updateFile(f)} 
    /> 
</MainApp>

因此，MainApp和編輯器將具有不同的減速器，存儲和操作。

問題是如何處理編輯的商店變化，所以一切。解決這個問題的方法可能是在React的生命週期中。我們可以在Editor安裝時創建商店，並根據新的道具更新其商店的部分內容。

喜歡的東西：

const Editor = React.createClass({ 
    componentWillMount() { 
    const initialData = {...this.props} // pick whatever data we need from props 
    this.store = createStore(initialData) // create initial Store 
    }, 
    componentWillReceiveProps (nextProps) { 
    const {content, author} = nextProps 
    this.store.dispatch(setAuthor(author)) 
    this.store.dispatch(setContent(content)) 
    }, 
    render() { 
    return (
     <Provider store={store}> 
     <EditorContainers /> 
     </Provider> 
    ) 
    } 
})

來源

2016-07-04 15:55:17 carlesba

是的，這絕對是一個解決方案。但是，如果這些應用程序共享相同的數據，則可能更容易從子應用程序中導出reducer並改爲使用單個存儲。由您決定使用哪種方式;兩個作品。 –

這解決了一個特定的情況，但我的問題是關於如何擴展一個應用程序，其中有許多應用程序與他們自己的商店，減速器，行動......不知道我們如何從許多子應用程序導入。 – carlesba

我沒有看到導入時遇到的問題。如果你可以創建一個新的問題來解決這個問題，那麼我可以提供幫助。當問題是「不確定X是否能工作」時，很難提供幫助。試試看:-) –

分離應用零部件另一種解決方案是有其自身的<Provider />

一個subapp

例如：

let store1 = createStore(reducers); 
let store2 = createStore(otherReducers); 


const RootApp =() => (
    <Provider store={store1}> 
    <MainApp /> 
    </Provider> 
) 
const MainApp =() => (
    <div> 
    <SomeMainAppComponent /> {/* This will receive store1 as context */} 

    <Provider store={store2}> 
     <EditorApp /> {/* This will receive store2 as context */} 
    </Provider> 
    </div> 
)

來源

2016-07-04 20:42:48 webdeb

這是我的第一個方法，但這並不能很好地擴展。它打破了Redux只有一個真實來源的主要原因。 – carlesba

我們可以編寫不同的Redux應用程序來創建更大的應用程序嗎？

回答

相關問題