我们可以编写不同的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应用程序来创建更大的应用程序吗？

回答

相关问题