React Redux append components

Question

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:

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.

Bryan Fillmer · Accepted Answer · 2016-05-15 20:06:14Z

2

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.

edited May 15, 2016 at 20:06

answered May 15, 2016 at 12:27

Bryan Fillmer

5384 silver badges4 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

mtwallet Over a year ago

Thanks for the reply, much appreciated. Creating a map makes sense and I think understand how I achieve that with actions/reducers but can you further explain how I would load the components into the <MainArea /> I'm struggling with the concept of loading whole components into another.

mtwallet Over a year ago

Ok I think I've got it. I'll give it a try. Thanks again for the explanation Bryan.

Collectives™ on Stack Overflow

React Redux append components

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related