Search code examples
javascriptreactjsreduxflux

Flux with dynamic reactjs page


I have a problem with flux implementation on my app.

Heres the scenario:

We're a site builder plataform, we have pages where we don't know what will be rendering. Its completely dynamic, varying from user to user. We have a lot of different components that may ou may not be loaded on the page and each component can have multiple instances.

What we need:

We need a FLUX structure that allows us to load only what we need from store and avoid unnecessary payload.

I have tried using Redux but the problems were:

Firstly we couldn't load all reducers at once but after a few research I built an interface capable of loading reducers on demand. But then I couldn't solve the problem with multiple instances from a component because the store file needs all states pre-refferenced :/

So, here's the question: How can I architect my app to use flux with dynamic pages and multiple instances from a component? Thanks in advance.


Solution

  • Well, after a few (a lot) more research and attempts I'll implement a solution using React + Flux.Dispatcher + Backbone as suggested here:

    https://www.toptal.com/front-end/simple-data-flow-in-react-applications-using-flux-and-backbone

    ===========================

    Hope anyone has used that tip above. Worked nice for simple screens, got shit and slowly with complex pages.

    Best way is to implement simple flux architecture as described in:

    https://scotch.io/tutorials/getting-to-know-flux-the-react-js-architecture https://blog.risingstack.com/the-react-js-way-flux-architecture-with-immutable-js/

    Connect your components with a store via decorator and go for it, works simple majestic.

    Hope it's usefull for someone.