Dasar Redux

---

Halo guyss,, welcome back to our channel… Kali ini saya akan mencoba membahas sedikit tentang redux.. sebelumnya sudah pernah dibahas tentang redux yahh.. sekarang kita write code sedikit cara dasar penggunaannya .. oke langsung aja

Installation

oke pertama kita add package nya dulu..

yarn add redux
yarn add redux-thunk

dan juga install devtools namun ini optional…

yarn add redux-devtools-extension

Membuat file store

jadi disini kita menentukan value dari global state yang kita akan gunakan.. sehingga nantinya cukup mengganti state dengan menggunakan reducer dan action dari Redux.. buat file store.tsx

import { createStore, combineReducers, applyMiddleware } from 'redux'
import thunk from 'redux-thunk'
import { composeWithDevTools } from 'redux-devtools-extension'
import { headerReducer } from './headerReducer'
import { sidebarReducer } from './sidebarReducer'

const reducer = combineReducers({
    header: headerReducer ,
    sidebar: sidebarReducer ,
})

const middleware = [thunk]

let initialHeader = {
    statusHeader: true
}

let initialSideBar = {
    statusSidebar: false
}

const initialState = {
    header: initialHeader ,
    sidebar: initialSideBar
}

const store = createStore(reducer, initialState,composeWithDevTools(applyMiddleware(...middleware)))

export default store;

Membuat file reducer

kemudian kita buat headerReducer.tsx

import { SHOW_HEADER } from "./headerConstant"

export const headerReducer = (state = [], action) => {

    switch (action.type) {
        case SHOW_HEADER:
            return { ...state, statusHeader: false}

        default:
            return state
    }
}

sidebarReducer.tsx

import { SHOW_SIDEBAR } from "./sidebarConstant"

export const sidebarReducer = (state = [], action) => {

    switch (action.type) {
        case SHOW_SIDEBAR:
            return { ...state, statusSidebar: true}

        default:
            return state
    }
}

Membuat file action

selanjutnya lanjut buat file headerAction.tsx

import { SHOW_HEADER } from "./headerConstant"

export const ShowHeader = () => async (dispatch) => {
   
    try {
        await dispatch({
            type: SHOW_HEADER
        })
    } catch (error) {
        console.log(error)
    }
}

dan sidebarAction.tsx

import { SHOW_SIDEBAR } from "./sidebarConstant"

export const ShowSidebar = () => async (dispatch) => {
   
    try {
        await dispatch({
            type: SHOW_SIDEBAR
        })
    } catch (error) {
        console.log(error)
    }
}

Membuat file Redux Const

buat headerConstant.tsx

export const SHOW_HEADER = "SHOW_HEADER"

buat sidebarConstant.tsx

export const SHOW_HEADER = "SHOW_HEADER"

Implementasi global state

oke sekarang kita gunakan apa yang sudah kita persiapkan tadi..

import { useSelector, useDispatch } from 'react-redux'
import { ShowHeader } from "../redux/headerAction"
import { ShowSidebar } from "../redux/sidebarAction"

......

const dispatch = useDispatch();

const header = useSelector(state => state.header)
const sidebar = useSelector(state => state.sidebar)

const {showHeader} = comment
const {showSidebar} = sidebar

<h1 onClick={() => {

dispatch(ShowHeader())

}}> Testing redux Header </h1>

<h1 onClick={() => {

dispatch(ShowSidebar())

}}> Testing redux Sidebar </h1>

<h2> ini hasil state redux header : {showHeader} </h2>
<h2> ini hasil state redux sidebar : {showSidebar} </h2>

Oke done cukup dasar Redux nya .. semoga bisa di implementasikan di project kalian yah… see you on next post ..