Search code examples
javascriptreactjsreduxredux-thunk

React Redux append components

I have an project I'm working that is a HTML page builder of sorts. The user can choose from a list of pre-designed HTML page sections (Header, sliders, content blocks, footers etc) from a menu and drop them onto a canvas to build a webpage. The end result is a downloadable zip file containing a static website.

My application layout looks like this so far:

Application wireframe

I have part 1,2 & 3 covered. Part 4, a slide out drawer, contains the HTML sections and when clicked I'd like to append the corresponding component to the main area of the page, this process would be repeated until the webpage has been built. Each component can then be edited and eventually saved as a page.

What I am looking for advice on is how, using React/Redux, do I append full components to the main area onclick?

I assume I dispatch action/reducer referencing a component, but how do I actually add and keep track of the components appended to the main area? Using jQuery this would be a simple jQuery .load() but in React/Redux I have no idea, maybe a trick I can use using React Router?

Can anyone help point me in the right direction? Further reading etc.

Many thanks in advance.

Solution

  • Loosely, you will want to map some type of ID to each component, then store those IDs within the store, something like mainArea = [id1, id6, id12] etc. Then your <MainArea /> component simply iterates over the props and references your established map to load the correct components.

    Edit: Clarifying how to leverage a map of components.

    This will be roughly what you are looking for. Let's assume the ids above are our components. Somewhere in our codebase we would have a mapping of those ids to components:

    const Component1 = React.createClass(...)
const Component6 = React.createClass(...)
const Component12 = React.createClass(...)

const componentMap = {
  id1: Component1,
  id6: Component6,
  id12: Component12,
}

    Then, when your <MainArea /> component iterates through the ids that it has stored it would pull the corresponding component from the mapping above and render it.