What's up, allocaters?

Back with me again, Glory. Do you ever hear about another version of Twilight-Saga in Front-End Technologies? Here I want to introduce you to the awesome Saga that maybe will be my (also your) nice friend for developing software, called Redux-Saga. 

Trust me that Redux-Saga is very amazing! I can't describe how amazing it is with words, but let's try it together with a simple example. In this occasion, we will try to do Redux-Saga API Fetching. The API we are going to use is allocateam's Hello World's API. So, before we start it, make sure that you already created a react-app first. Then, let's do it together step-by-step!

1] In folder containers, due to Redux-Saga will be associated with containers, create a container named HelloWorld  so we will code everything inside the HelloWorld container to fetch allocateam's Hello World's API. 

2] Inside the HelloWorld container, create index.js, actions.js, api.js, sagas.js, store.js, Home.js, and a folder named reducers, inside the reducers, create data.js and index.js.

3] HelloWorld/actions.js

4] HelloWorld/api.js

5] HelloWorld/sagas.js

6] HelloWorld/store.js

7] HelloWorld/Home.js

8] HelloWorld/index.js

*) You can change PageTitle with h1 or another related HTML component.

9] HelloWorld/reducers/data.js

10] HelloWorld/reducers/index.js

11] Go to the terminal then run this command: npm start then open your browser and go to localhost:3000 

Ta-da! You will see Hello World on your screen. The word "World" comes from the result of Redux-Saga API Fetching! You can use Redux-Saga for fetching another API too. Even, not only fetching, there are still many activities you can do with Redux-Saga, such as API Post (we will discuss it later!) So cool, isn't it?

Hope that this simple tutorial will be helpful. See you on another post, allocaters! 

Hi, guys! :)

You can call me Tari, I’m one the member of the very awesome team allocateam.

Before we get into, why redux, why not the other thing, let me tell you first about what it is actually. If React is the framework for our javascript, then what the use of Redux? As the title said, Redux will handle the complex state of an object.

With the UI of website getting improved all the time (adding some component and more complex things), we also asked to keep the state of the object are on track as best as possible. Yet, at some point, the state tend to become questionable as we asked ourself, “How the list have this kind of state?”

This is where Redux come! 

Redux will put all the state in a store AND we will only have on a tree in our apps that store all of our states. Maybe you think it’s kinda cool, but it’s going to be big and hard to read; stay calm guys. We will get into that because definitely, Redux have something to handle it (psst, it’s call reducer ;))

Imagine that you write your app’s state as a plain object, this object is like a model but it has no “setter”, so the only way to change part of it is to dispatch an action. Using this concept, we know how and why if something has changed. Next, we’ll need the reducer to tie the action and state object—as a reducer will be hard to maintain for a big app, then we can write smaller function managing part of the state and have another reducer that organizes all the states in our app.

Last, if you want to know more about Redux you can check in its official website, here it is—and this one writing with a cartoon which I think explain the flow a lil bit better.