Hari 18: React Redux

30 Hari Javascript

Subscribe to my newsletter and never miss my upcoming articles

Redux adalah library yang digunakan sebagai state management global. Beberapa orang bilang redux itu ibarat database di frontend, tapi ini hanya bersifat sementara tidak benar-benar tersimpan. Libih jelasnya baca di sini.

https://camo.githubusercontent.com/ab7d58d6490c527f07c7a99097dc8a36588cfad9/68747470733a2f2f63646e2d696d616765732d312e6d656469756d2e636f6d2f6d61782f313630302f312a3837644a35454233796444375f4162684b6234554f512e706e67

Persiapan React Redux

Beberapa yang perlu diinstall pada saat menggunakan react redux yaitu berikut.

npm i redux
npm i react-redux
npm i redux-thunk
npm i axios

Reducer

Reducer adalah function yang digunakan untuk mengubah data state sesuai dengan action yang diterima yang akan dicek menggunakan switch case atau if else (kebanyakan menggunakan switch case).

Buatlah file user.reducer.js dalam folder reducers, yang isinya seperti berikut.

File user.reducer.js

const initialState = {
  data: [],
  isError: false,
  isLoading: false,
};

export default (state = initialState, action) => {
  switch (action.type) {
    case "GET_USER_REQUEST":
      return {
        ...state,
        isError: false,
        isLoading: true,
      };
    case "GET_USER_DONE":
      return {
        ...state,
        data: action.payload,
        isError: false,
        isLoading: false,
      };
    case "GET_USER_ERROR":
      return {
        ...state,
        isError: true,
        isLoading: false,
      };
    default:
      return state;
  }
};

Action

Action berfungsi sebagai control apasaja yang akan dilakukan oleh reducer untuk mengubah data. Buatlah file user.action.js dalam folder actions, yang isinya seperti berikut.

File user.action.js

import axios from "axios";

const baseUrl = `https://warm-refuge-26108.herokuapp.com`;

export const getUsers = () => {
  return async (dispatch) => {
    dispatch({
      type: "GET_USER_REQUEST",
    });
    try {
      const result = await axios.get(baseUrl + `/users`);
      dispatch({
        type: "GET_USER_DONE",
        payload: result.data,
      });
    } catch (error) {
      dispatch({
        type: "GET_USER_ERROR",
      });
    }
  };
};

Store

Store adalah kumpulan reducer yang dijadikan sebagai induk data untuk dibagikan kesemua component dengan provider. Buatlah file store.js didalam folder helpers yang isinya berikut.

import { createStore, combineReducers, applyMiddleware } from "redux";
import thunk from "redux-thunk";

import Users from "../reducers/user.reducer";

const combine = combineReducers({
  users: Users,
});

const Store = createStore(combine, applyMiddleware(thunk));
export default Store;

Provider

Provider adalah function dari react-redux sebagai penyedia store yang bisa diakses semua component. Ubah file App.js menjadi seperti berikut.

import React from "react";
import { Provider } from "react-redux";
import "./App.css";

import Store from "./helpers/store";
import RouterApp from "./RouterApp";

function App() {
  return (
    <Provider store={Store}>
      <RouterApp />
    </Provider>
  );
}
export default App;

No Comments Yet