Wednesday, November 4, 2015

Simple React Redux example

As a newbie when it comes to Rreact, React Router and React Redux; I found it very hard to get started, even though I have several years of experience in programming. The flow of the applications is hard to follow when using Redux and figuring out how the different parts communicate was not easy. Most tutorials and examples had (in my opinion) too many dependencies  and used a lot of "magic" that did not make sense for a beginner.

I found this fantastic guide that helped me a lot: https://github.com/happypoulp/redux-tutorial.
It describes, in the most minimalistic and simple way; each part of the application flow and the purpose of everything. After reading this and using the example snippets to get redux running(With running I mean without actually doing or rendering anything, but simply not throwing errors in my face), it was much easier to continue.

Using the demo app from the course(https://github.com/krawaller/riastart2015) as inspiration what a "complete" application is. I managed to scrape together a small example where (I hope) there is nothing unnecessary to create confusion.

There are two components called "wrap" and "nav", their purpose is simply to render a container for everything with navigation. Also, there is a "static" component that only renders "Hello world".

The component called "Count" is the tricky one that I tried to make simple. It has two buttons that can increase or decrease a value and it uses redux and the applications state to accomplish this.

Try out the demo:
http://afridlund85.github.io/React-Redux-example/

Check out the code:
https://github.com/afridlund85/React-Redux-example

No comments:

Post a Comment