# 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](https://redux.js.org/).

![https://camo.githubusercontent.com/ab7d58d6490c527f07c7a99097dc8a36588cfad9/68747470733a2f2f63646e2d696d616765732d312e6d656469756d2e636f6d2f6d61782f313630302f312a3837644a35454233796444375f4162684b6234554f512e706e67](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;
```