Hari 18: React Redux

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. Lebih jelasnya baca di sini.

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;