Solution Feedback: fractal-component

[t83714]

Hi @slorber,

Thanks for creating this repo. Learned a lot from everyone's solutions and think now it's time for me to contribute back 😄

Created this PR for submitting my solution: fractal-component.

I think fractal-component perfectly solved this problem by providing a fully decoupled component encapsulation mechanism --- a component created using fractal-component can be even published as NPM modules while still enjoy the convenience of predictable global Redux store.

You can actually have a look at the NPM module version of this example on CodePen --- see how whole example App's logic is implemented in a single HTML file by pulling UMD version of NPM modules from CDN :-)

How fractal-component achieves that? It powers your components with the following features:

• Multicast Actions
• Namespaced Actions
• Serializable Symbol Action Type
• Hot Plug Redux Reducer & Auto mount / unmount
• Hot Plug Saga & Auto mount / unmount
• Namespaced Redux Store
• Auto Component State Management & Redux Store Mapping
• Enhanced Server-Side Rendering (SSR) Support

A typical structure of components created by fractal-component can be illustrated by the graph below:

Run example App locally

npm install
npm start

Then, visit http://localhost:3000/

Giphy.com API key

The exampleApp comes with a testing Giphy.com API key in order to retrieve random Gifs from https://giphy.com/. The api key is limited to 40 requests per hour.

You can create your own API key from https://developers.giphy.com/ and replace the API key in Component RandomGif

[slorber]

thanks for your solution