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;