Apa itu Redux-Thunk?

Aldy Tamara Software Engineer

27 Apr 2020, 3 min read

Apa itu redux thunk

Halo semua! kali ini kita akan belajar bareng nih mengenai redux-thunk meskipun materi react di Zona Coding belum ada ya hehe..

Tenang aja sedang dipersiapkan agar nantinya materinya juga baik dalam penyampaiannya. Oke langsung aja kita bahas!

Apa itu redux-thunk?

Redux-Thunk merupakan sebuah middleware untuk menajemen state yang diperuntukkan untuk redux.

Ya, sesimple itu tapi buat mimin ini sangat berguna. Untuk yang belum tau, Thunk adalah sebuah jokes yang berasal dari past-tense sebuah kata bahasa inggris yaitu Think.

Tapi sebaiknya kalo kalian belum belajar react dan react-redux (library untuk manajemen state pada javascript) silahkan belajar dulu ya!

Kalo materi tentang react sudah ada di Zona Coding nnti akan diupdate diakhir artikel ini!

Mengapa kita membutuhkan Redux-Thunk?

Ketika kita hanya memakai redux store, kita hanya bisa melakukan synchronous update dengan men-dispatching sebuah action.

Nah, middleware meningkatkan kemampuan store yang ada di redux dan memungkinkan kita menulis sebuah logic asynchronous dalam berinteraksi dengan store.

Redux-Thunk sebuah middleware yang sangat bermanfaat untuk basic redux side effect logic, termasuk synchronous logic yang kompleks yang membutuhkan akses ke store dan juga async logic sederhana dengan AJAX request.

Alasan lainnya bisa kalian baca di sini

Mari kita coba!

Redux-Thunk memungkinkan kita menulis sebuah action creator yang mengembalikan sebuah function dari pada sebuah action.

Thunk dapat digunakan untuk menunda dispatch suatu action, atau men-dispatch hanya jika sebuah kondisi tertentu terpenuhi.

Pastikan redux yang dipakai adalah versi diatas 3.1.0 ya!

Install redux-thunk dengan ketik :

npm install redux-thunk

kemudian import pada root aplikasi kalian misal di App.js

import {createStore,applyMiddleware} from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers/index';

const store = createStore(rootReducer,appliMiddleware(thunk));

Sesimple itu untuk konfigurasi awal sebuah redux-thunk! setelah itu kita buat sebuah file dengan nama actionTypes.js (bebas) yang gunanya menyimpan nama type fungsi yang akan kita pakai nantinya.

kemudian copy-paste code dibawah ini :

export  const  ADD_STUDENT  =  'ADD_STUDENT';
export  const  REMOVE_STUDENT  =  'REMOVE_STUDENT';
export  const  EDIT_STUDENT  =  'EDIT_STUDENT';
export  const  GET_STUDENT  =  'GET_STUDENT';

kemudian buat file satu lagi untuk menyimpan fungsi nya, namanya bebas tapi saran saya adalah buat sebuah nama yang berhubungan dengan pengolahan datanya misalkan saya mengolah data siswa jadi saya buat students.js. dan isikan sebagai berikut:

import * as actionTypes from './actionTypes';


export const addStudent = (student) => {
    return {
        type: actionTypes.ADD_STUDENT,
        payload: student
    }
}

export const removeStudent = (id) => {
    return {
        type: actionTypes.REMOVE_STUDENT,
        payload: id
    }
}

export const getStudent = (students) => {
    return {
        type: actionTypes.GET_STUDENT,
        payload: students
    }
}

export const editStudent = (students) => {
    return {
        type: actionTypes.EDIT_STUDENT,
        payload: students
    }
}

ketika nanti dicomponent men-dispatch sebuah action yang biasanya dispatch({type:'ADD_STUDENT',payload:students}) cukup menjadi dispatch(addStudent(students)).

// ...import yang lain
import { useDispatch } from  'react-redux';
// kita import actionnya dan saya namakan studentAction
import  *  as  studentAction  from  "./students";

export  const  Home  = () => {

const  dispatch  =  useDispatch()
// ketika mendispatch cukup
dispatch(addStudent(studentsData));

// ...code yang lain
}

Mudahkan? tapi tunggu, kegunaan redux-thunk tidak hanya sampai di situ! Sekilas kita melihat yang membedakan redux tanpa thunk dengan redux with thunk hanya bagian penggunaan dispatch action melalui sebuah fungsi.

Bagaimana jika kita ingin membuat sebuah action asynchronous, seperti memanggil sebuah API atau sebuah melakukan router-transition? mari kita lihat.

// misalkan saya memiliki sebuah fungsi untuk mendispatch action seperti berikut
export const setStudents = ( students) => {
    return {
        type: actionTypes.SET_STUDENTS,
        payload: students
    };
};

export const fetchStudentsFailed = () => {
    return {
        type: actionTypes.FETCH_STUDENTS_FAILED
    };
};

// saya mau jika respon dari api berhasil maka set students, jika gagal maka fetchStudentsFailed

export const initStudents = () => {
    return dispatch => {
        axios.get( 'https://iniapi.com/students.json' )
            .then( response => {
               dispatch(setStudents(response.data));
            } )
            .catch( error => {
                dispatch(fetchStudentsFailed());
            } );
    };
};

// kita cukup panggil dispatch(initStudents()) di component!

Voilaa! nantinya action yang dipanggil adalah hasil dari kondisi then(success)/catch(error)!

Bagaimana menurut mu? menurut saya sampai di sini saja sudah memudahkan sekali dan jangan lupa kegunaan redux-thunk masih banyak lagi!

Selengkkapnya bisa kalian baca disini ya! Github Redux-Thunk

Nantinya materi react akan hadir di Zona Coding ya Stay tune! Sekian dan terimakasih!


Tags:



Baca artikel menarik lainnya: