Programming

Konsep Flux Pada React JS dan Cara Menggunakannya

Apa itu Konsep Flux ?

Flux ialah konsep programming dimana data bersifat Uni-directional. Hal ini dimana data masukkedalam suatu aplikasi dan mengalir melalui 1 arah hingga dirender pada layar.

Berikut ini adalah penjelasan sederhana tentang konsep flux.

  • Action : Suatu aksi yang dikirim ke Dispatcheruntuk mengeksekusi alur data (Data flow)
  • Dispatcher :Ini merupakan hub pusat dari aplikasi. Semua data dikirim melalui Dispatcher dan disimpan di store
  • Store : Store merupakan tempat dimana kondisi (State) dan logika aplikasi disimpan. Setiap store mempertahankan status tertentu dan akan diupdate saat diperlukan.
  • View :View menerima data dari store lalu merender kembali ke aplikasi

Alur kerjanya bisa kamu lihat pada gambar dibawah ini :

Kelebihan dari konsep flux itu sendiri diantaranya :

  • Alur data 1 arah lebih mudah dipahami
  • Suatu aplikasi lebih mudah dipertahankan atau di maintenance
  • Bagian aplikasi dipisahkan

Cara Menggunakan Flux di React JS

Pada bagian ini, kamu akan belajar cara mengimplementasikan konsep flux pada React JS. Disini kita akan menggunakan framework Redux. Tujuan dari langkah dibawah ini hanya sebagai contoh sederhana untuk menghubungkan Redux dengan React.

Langkah 1 : Install Redux

Kita akan menginstall Redux melalui Command Prompt dengan perintah berikut :

C:\Users\username\Desktop\reactApp>npm install –save react-redux

Langkah 2 : Membuat File dan Folder

Selanjutnya kita akan membuat folder dan file untuk Action, reducers, dan Components. Setelah selesai, berikut adalah tampilan foldernya nanti :

C:\Users\Tutorialspoint\Desktop\reactApp>mkdir actions

C:\Users\Tutorialspoint\Desktop\reactApp>mkdir components

C:\Users\Tutorialspoint\Desktop\reactApp>mkdir reducers

C:\Users\Tutorialspoint\Desktop\reactApp>type nul > actions/actions.js

C:\Users\Tutorialspoint\Desktop\reactApp>type nul > reducers/reducers.js

C:\Users\Tutorialspoint\Desktop\reactApp>type nul > components/AddTodo.js

C:\Users\Tutorialspoint\Desktop\reactApp>type nul > components/Todo.js

C:\Users\Tutorialspoint\Desktop\reactApp>type nul > components/TodoList.js

Langkah 3 : Action

Action adalah objek javascript yang menggunakan properti Type untuk menginformasikan bagaimana suatu data harus dikirim ke Store.

Disini kita akan menggunakan action ADD_TODO yang akan digunakan untuk menambahkan item baru.

Action / action.js

export const ADD_TODO = ‘ADD_TODO’

 

let nextTodoId = 0;

 

export function addTodo(text) {

return {

type: ADD_TODO,

id: nextTodoId++,

text

};

}

 

Langkah 4 : Reducers

Meskipun tindakan hanya memicu perubahan dalam aplikasi, reducers lah yang menentukan perubahan tersebut. Kita akan menggunakan statement switch untuk mencari tindakan ADD_TODO.

Reducers itu sendiri adalah fungsi yang mengambil dua parameter (State dan Action) untuk menghitung dan mengembalikan State  yang diperbarui.

Fungsi pertama akan digunakan untuk membuat item baru, sedangkan fungsi kedua akan mengirim item tersebut ke daftar.

Menjelang akhir, kita akan menggunakan fungsi pembantu CombineReducers di mana kita dapat menambahkan reducers baru yang mungkin di gunakan di masa mendatang.

Reducers / reducers.js

import { combineReducers } from ‘redux’

import { ADD_TODO } from ‘../actions/actions’

 

function todo(state, action) {

switch (action.type) {

case ADD_TODO:

return {

id: action.id,

text: action.text,

}

default:

return state

}

}

function todos(state = [], action) {

switch (action.type) {

case ADD_TODO:

return [

…state,

todo(undefined, action)

]

default:

return state

}

}

const todoApp = combineReducers({

todos

})

export default todoApp

 

Langkah 5 : Store

Store ialah tempat untuk menyimpan State suatu aplikasi. Akan sangat mudah untuk membuat Store begitu kamu memiliki Reducers. Disini kita akan mengirim properti Store ke elemen Provider, yang mana akan mengemas route component nantinya.

Main.js

import React from ‘react’

 

import { render } from ‘react-dom’

import { createStore } from ‘redux’

import { Provider } from ‘react-redux’

 

import App from ‘./App.jsx’

import todoApp from ‘./reducers/reducers’

 

let store = createStore(todoApp)

let rootElement = document.getElementById(‘app’)

 

render(

<Provider store = {store}>

<App />

</Provider>,

rootElement

)

 

Langkah 6 : Root Component

Komponen App adalah komponen root dari aplikasi. Hanya komponen root yang harus mengetahui redux. Bagian penting yang harus diperhatikan adalah fungsi Connect yang digunakan untuk menghubungkan Root component App  kita ke Store.

Fungsi ini mengambil fungsi Select sebagai argumen. Fungsi Select mengambil status dari Store dan mengembalikan props (visibleTodos) yang dapat kita gunakan dalam komponen nanti.

App.jsx

import React from ‘react’

 

import { render } from ‘react-dom’

import { createStore } from ‘redux’

import { Provider } from ‘react-redux’

 

import App from ‘./App.jsx’

import todoApp from ‘./reducers/reducers’

 

let store = createStore(todoApp)

let rootElement = document.getElementById(‘app’)

 

render(

<Provider store = {store}>

<App />

</Provider>,

rootElement

)

Step 6 – Root Component

The App component is the root component of the app. Only the root component should be aware of a redux. The important part to notice is the connect function which is used for connecting our root component App to the store.

This function takes select function as an argument. Select function takes the state from the store and returns the props (visibleTodos) that we can use in our components.

App.jsx

import React, { Component } from ‘react’

import { connect } from ‘react-redux’

import { addTodo } from ‘./actions/actions’

 

import AddTodo from ‘./components/AddTodo.js’

import TodoList from ‘./components/TodoList.js’

 

class App extends Component {

render() {

const { dispatch, visibleTodos } = this.props

 

return (

<div>

<AddTodo onAddClick = {text =>dispatch(addTodo(text))} />

<TodoList todos = {visibleTodos}/>

</div>

)

}

}

function select(state) {

return {

visibleTodos: state.todos

}

}

export default connect(select)(App);

 

Langkah 7 : Membuat Komponen tambahan

Component / AddTodo.js

import React, { Component, PropTypes } from ‘react’

 

export default class AddTodo extends Component {

render() {

return (

<div>

<input type = ‘text’ ref = ‘input’ />

<button onClick = {(e) => this.handleClick(e)}>

Add

</button>

</div>

)

}

handleClick(e) {

const node = this.refs.input

const text = node.value.trim()

this.props.onAddClick(text)

node.value = ”

}

}

 

Component / Todo.js

import React, { Component, PropTypes } from ‘react’

 

export default class Todo extends Component {

render() {

return (

<li>

{this.props.text}

</li>

)

}

}

 

Component / TodoList.js

import React, { Component, PropTypes } from ‘react’

import Todo from ‘./Todo.js’

 

export default class TodoList extends Component {

render() {

return (

<ul>

{this.props.todos.map(todo =>

<Todo

key = {todo.id}

{…todo}

/>

)}

</ul>

)

}

}

 

Ketika aplikasinya kamu jalankan, maka kamu bisa menambahkan item baru kedalam daftar seperti berikut :

flux react js

Sumber : https://www.tutorialspoint.com/reactjs/reactjs_using_flux.htm

About the author

Techfor Id

Leave a Comment

Click to ask
Hai, Tanya-Tanya Aja
Hi ini Windy, dari techfor

Windy bisa membantu kamu memahami layanan Techfor
Seperti

1. Kursus Online By Expert
2. Partnership Event dan Konten
3. Layanan liputan multimedia
4. Dan hal lain yg ingin kamu tau

Kirim saja pesan ini serta berikan salah satu nomor diatas atau beritahukan windy lebih jelas agar dapat membantu Kamu