Introducing React-Indie

With React-Indie you can build An independent react Component that holds all its logic inside.

Data state management is one of the hot topics in the react world today. Implementations like Redux try to solve the data model in an holistic approach. Redux, implements a global state that holds all the relevant app state. That is all great & de-facto the way of building complex react apps, but there are times that this data model doesn’t feat all the parts of your app implementation. There are times that you want to have an independent component that is isolated from all the global state logic of the app but still needs a connection to the server.

You could, of-course, implement a simple react class with a server implantation hooked inside. But what if you want to be more explicit about your code implementation? what if you still want to separate the state management from the pure UI?

That is the idea behind React-Indie; React-Indie is a high order component that composes a set of self contained data sources on top of a pure react component.

Great, I think I got your point, but can I see it in action?

A weather widget example

Lets say you want to implement a weather widget in your react app. Your app can run on whatever data architecture you want (for the sake of the example lets say Redux). But for that specific widget you fill that implementing Redux action creators & reducers is an overkill… You are not planning to use the weather data anywhere else in the code so you don’t need/want to implement it on the global app state.

Lets say your widget looks something like this:

Its a pure React component that gets a single temperature prop.

Now, what if instead of contaminating your pure component code or add a custom component to wrap this one, you could use an already made component that is fully tested and implements the code for you:

Well, you can with React-Indie:

In the above example we pass to React-Indie two arguments: the pure `Weather` component and a props configuration object that maps each given component props to an array of 2 arguments: an initial default value for the prop (Loading data…); and a promise that returns the temperature from the server.

Sounds cool, but how do I handle errors or continue to fetch data constantly from the server to stay in sync?

Well, React-Indie also support error handling and advanced data resolve method, Feel free to check out the repo and run the embedded examples code locally to find out more. (one of the examples showcase a fully functional weather widget that gets real weather data from http://openweathermap.org/

Screen shot taken from the code examples that are embedded inside the react-indie project repo.It uses react-storyboard to showcase the component code example.

I hope I teased you enough to start playing with React-Indie. Feel free to leave hear a comment or open a github issue in the repo.

Have a great day/night.

Show your support

Clapping shows how much you appreciated Gabriel Guy’s story.