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!
0 komentar:
Post a Comment