{"id":199,"date":"2020-04-05T10:11:35","date_gmt":"2020-04-05T10:11:35","guid":{"rendered":"https:\/\/sentraldigitalindonesia.co.id\/blog\/?p=199"},"modified":"2020-04-05T10:11:40","modified_gmt":"2020-04-05T10:11:40","slug":"apa-itu-redux","status":"publish","type":"post","link":"https:\/\/sentraldigitalindonesia.co.id\/blog\/2020\/04\/05\/apa-itu-redux\/","title":{"rendered":"Apa Itu Redux ?"},"content":{"rendered":"\n

Redux merupakan back-end<\/em> yang berkolaborasi dengan react native<\/em><\/strong>. <\/em>Belajar framework<\/em> baru merupakan hal yang menantang dan mmanaenyusahkan, namun sekali menemukan alur pengkodean (menulis code) akan lebih mudah untuk mengimplementasikan.<\/p>\n\n\n\n

Menjadi seorang pemula dalam Redux membuat saya membaca banyak referensi hal dasar yang harus ada dalam aplikasi berbasis Redux. Setelah membaca lebih dari ratusan kata (lebay, dalam artian lain beberapa artikel), saya menemukan basis dari aplikasi Redux. Basis dalam hal ini yaitu bagian dasar yang bisa membuat aplikasi Redux dapat berjalan.<\/p>\n\n\n\n

Implementasi Redux bisa digambarin pake diagram berikut:<\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

Jadi ada 4 aktor utama di dalam sistem Redux:<\/p>\n\n\n\n

  1. Action<\/li>
  2. Store<\/li>
  3. Reducer<\/li>
  4. State<\/li><\/ol>\n\n\n\n

    App\/UI membuat objek Action<\/strong> dan mengirimkannya ke Store<\/strong>. Oleh Store<\/strong>, objek Action<\/strong> diteruskan ke Reducer<\/strong> yang bertugas melakukan update<\/em> terhadap State<\/em>. Kalo ada pembaruan State<\/strong> maka Store<\/strong> mengirim objek State<\/strong> yang baru ke semua bagian App yang jadi subscriber<\/strong> \/ listener<\/strong>.<\/p>\n\n\n\n

    Action<\/h3>\n\n\n\n

    Action adalah objek sederhana yang wajib punya properti bernama type<\/code> & bertipe string<\/code>. Action boleh berisi data lain yang mungkin diperlukan untuk update state, tapi yang paling pokok adalah type<\/code>.<\/p>\n\n\n\n

    const add = {   type:'ADD',   value: 100 } const start = {   type: 'START' }<\/code><\/pre>\n\n\n\n
    Reducer<\/h3>\n\n\n\n
    Reducer adalah sebuah function<\/em> yang bertugas memproses Action<\/strong> dan bikin State<\/strong> baru. Reducer punya dua parameter state<\/code> & action<\/code>.<\/p>\n\n\n\n
    const reducer = ( state = {}, action) =>{   if(action.type === ....) {     \/\/ blah blah     return newstate;   } else if(action.type === ....) {     \/\/ blah blah blah     return otherstate   }   return state; };<\/code><\/pre>\n\n\n\n
    Syarat Reducer adalah dia harus berupa pure function<\/em>. Apa itu ?<\/p>\n\n\n\n
    Pure Function<\/em> (PF) adalah function<\/em> yang:<\/p>\n\n\n\n
    1. Selalu memberi nilai balik yang sama selama argumennya sama.<\/li>
    2. Nggak mengubah (mutate<\/em>) objek atau variabel lain<\/li>
    3. Nggak tergantung\/terpengaruh objek atau variabel lain<\/li><\/ol>\n\n\n\n
      Contoh yang bukan PF:<\/p>\n\n\n\n
      let ammo = 100; const shoot = () =>{   \/\/ngerubah variabel di luar fn   return ammo--; } const canShoot = ( round ) =>{   \/\/tergantung variabel di luar fn   if( round >= ammo){     return true;   }   return false }<\/code><\/pre>\n\n\n\n
      Store<\/h3>\n\n\n\n
      Store<\/em> adalah objek yang menghubungkan Action<\/em> & Reducer<\/em>. Pada intinya, objek ini bertugas:<\/p>\n\n\n\n
      1. Menyimpan State<\/em><\/li>
      2. Menyediakan API untuk mengakses State<\/em><\/li>
      3. Menyediakan API untuk update<\/em> State<\/em><\/li>
      4. Menyediakan API biar objek lain bisa jadi listener<\/em> \/ subscriber<\/em><\/li>
      5. Menyediakan API untuk melepas listener<\/em> \/ subscriber<\/em>.<\/li><\/ol>\n\n\n\n
        Satu aplikasi hanya boleh punya satu Store<\/em>. Tapi satu Store<\/em> bisa punya banyak Reducer<\/em>. Jadi kalo kita ingin memecah kode yang bertugas menghandel data ke dalam beberapa modul, kita bisa bikin beberapa Reducer<\/em> & nanti digabung dalam satu Store<\/em>. Misalnya kayak di bawah ini:<\/p>\n\n\n\n
        \"\"<\/figure><\/div>\n\n\n\n
        Contoh Aplikasi: Video Player<\/h2>\n\n\n\n
        Redux didistribusikan sebagai modul NPM. Jadi kita instal dulu:<\/p>\n\n\n\n
        $ yarn init -y && yarn add redux -E -S<\/code><\/pre>\n\n\n\n
        Selain Redux, kita pake Poi<\/a> untuk transpile ES6 & jalanin server lokal.<\/p>\n\n\n\n
        Template HTML<\/h3>\n\n\n\n
        <!-- file: index.ejs --> <h1>My Video Player<\/h1> <div id=\"app\">   <video id=\"myvideo\"><\/video>   <div id=\"controlbar\">     <div>       <input type=\"text\" name=\"video-source\" value=\"\" placeholder=\"video url\">       <button id=\"load-src-btn\">Load<\/button>     <\/div>     <div>       <button id=\"play-pause-btn\">Play<\/button>       <button id=\"vol-up-btn\">Vol+<\/button>       <button id=\"vol-down-btn\">Vol-<\/button>       <div id=\"time\">         <span>Time: <\/span>         <input type=\"text\" name=\"time\" value=\"0\">         <span>\/<\/span>         <span id=\"duration\">00<\/span>       <\/div>     <\/div>   <\/div> <\/div><\/code><\/pre>\n\n\n\n
        Stylesheet<\/h4>\n\n\n\n
        Sebenernya nggak penting sih. Tapi ya biar app-nya nggak jelek-jelek amat.<\/p>\n\n\n\n
        *{   margin:0;padding:0; } body{   font-size: 1.2em;   line-height: 1.5em;   padding:10px; } h1{   margin: 1em 0; } video{   width:640px;   height:360px;   position: relative;   background: #66CCFF; } #controlbar{   line-height: 2em;   font-size:14px;   input[type=text]{     width:90%;     max-width:640px;     padding: 5px;     font-size:100%;   }   input[name=time]{     width:4em;   }   button{     font-size:0.8em;     padding:5px;   }   :last-child{     margin-top:10px;   }   #time{     display:inline-block;     text-align: center;   } }<\/code><\/pre>\n\n\n\n
        Terus bikin file entry<\/em> buat appnya sendiri:<\/p>\n\n\n\n
        \/\/file: src\/index.js import '.\/styles.scss'<\/code><\/pre>\n\n\n\n
        Nyalain Poi:<\/p>\n\n\n\n
        $ poi src\/index.js<\/code><\/pre>\n\n\n\n
        Terus buka localhost:4000<\/code>.<\/p>\n\n\n\n
        \"\"<\/figure><\/div>\n\n\n\n
        Lanjut ke \u201ckodingannya\u201d ( bahasa programmer jaman NOW ).<\/p>\n\n\n\n
        State, Reducer & Store Minimalistik<\/h3>\n\n\n\n
        Pertama kita bikin object State<\/em>-nya. Sederhana aja,<\/p>\n\n\n\n
        \/\/file: src\/index.js import '.\/styles.scss' const defaultVideoState = {   source: undefined,   status: undefined,   volume: 1,   duration: 0,   time: 0 };<\/code><\/pre>\n\n\n\n
        Lanjut bikin Reducer<\/em>, masih di file src\/index.js<\/code>.<\/p>\n\n\n\n
        const videoStateReducer = (state = defaultVideoState, action) => {   return state; };<\/code><\/pre>\n\n\n\n
        Terus bikin Store<\/em> & subscriber:<\/p>\n\n\n\n
        \/\/import dulu import { createStore } from 'redux'; const videoStore = createStore( videoStateReducer ); \/\/ekspos ke global NS biar bisa dipanggil di konsol window.videoStore = videoStore; \/\/tambah subscriber buat ngetes videoStore.subscribe(()=>{   console.log('VideoStore:current state', videoStore.getState()); })<\/code><\/pre>\n\n\n\n
        Sekarang kita tes dulu koneksi antara Store<\/em>, Reducer<\/em> & subscribernya. Buka konsol & coba kirim Action<\/em> ke videoStore<\/code>:<\/p>\n\n\n\n
        window.videoStore.dispatch({ type:'HELLO' });<\/code><\/pre>\n\n\n\n
        \"\"<\/figure><\/div>\n\n\n\n
        Jadi dari hasil testing di atas, bisa diliat prosesnya:<\/p>\n\n\n\n
        1. videoStore<\/code> menerima Action<\/em> berupa objek { type: 'HELLO'}<\/code><\/li>
        2. Action<\/em> diterusin ke videoStateReducer<\/code><\/li>
        3. videoStore<\/code> jalanin listener\/subscriber<\/li><\/ol>\n\n\n\n
          Action<\/h3>\n\n\n\n
          Video player ini butuh 6 action (kemungkinan nanti nambah):<\/p>\n\n\n\n
          1. SET_SOURCE<\/li>
          2. PLAY<\/li>
          3. PAUSE<\/li>
          4. SEEK<\/li>
          5. VOLUME_UP<\/li>
          6. VOLUME_DOWN<\/li><\/ol>\n\n\n\n
            Kalo setiap kali butuh Action kita harus bikin objek secara manual pasti repot & resiko error ( typo dsb). Jadi kita bikin yang namanya Action Generator<\/em>\/ Action Factory<\/em>.<\/p>\n\n\n\n
            \/\/file: src\/actions.js \/\/konstanta buat Action type biar nggak salah ketik export const SET_SOURCE = 'SET_SOURCE'; export const PLAY = 'PLAY'; export const PAUSE = 'PAUSE' export const SEEK = 'SEEK'; export const VOLUME_UP = 'VOLUME_UP'; export const VOLUME_DOWN = 'VOLUME_DOWN'; export const setSource = (url) =>({   type:SET_SOURCE,   url }); export const play = () =>({   type:PLAY }); export const pause = () =>({   type:PAUSE }); export const seek = (time) =>({   type:SEEK,   time }); export const volumeUp = () =>({   type:VOLUME_UP }); export const volumeDown = () =>({   type:VOLUME_DOWN });<\/code><\/pre>\n\n\n\n
            Set-Source<\/h3>\n\n\n\n
            Di file src\/index.js<\/code>, kita update videoStateReducer<\/code> untuk handel action SET_SOURCE<\/code>.<\/p>\n\n\n\n
            \/\/file: src\/index.js \/\/import dulu semuanya import * as Actions from '.\/actions'; const videoStateReducer = (state = defaultVideoState, action) => {   console.log('VideoStateReducer','state',state,'action', action);   switch(action.type){     case Actions.SET_SOURCE:       return {         ...state,         source: action.url       }   }   return state; };<\/code><\/pre>\n\n\n\n
            Di baris paling bawah sendiri, setelah subscribe<\/code>, kita coba dispatch action SET_SOURCE<\/code>.<\/p>\n\n\n\n
            videoStore.subscribe((state)=>{   console.log('VideoStore:current state', videoStore.getState()); }); \/\/DISPATCH ACTION videoStore.dispatch(Actions.setSource('http:\/\/google.com'));<\/code><\/pre>\n\n\n\n
            \"\"<\/a><\/figure><\/div>\n\n\n\n
            Berikutnya, bikin file src\/video_wrapper.js<\/code> untuk logic playernya :<\/p>\n\n\n\n
            \/\/file: src\/video_wrapper.js const VideoWrapper = (store) => {   const videoEl = document.getElementById('myvideo');   \/\/subscribe   store.subscribe(( )=>{     let state = store.getState();     if(state.status === 'new_source'){       videoEl.src = state.source;     }   }); } export default VideoWrapper;<\/code><\/pre>\n\n\n\n
            Dan edit dikit Reducer<\/em>-nya, tambahin status:'new_source'<\/code><\/p>\n\n\n\n
            \/\/file: src\/index.js const videoStateReducer = (state = defaultVideoState, action) => {   console.log('VideoStateReducer','state',state,'action', action);   switch(action.type){     case Actions.SET_SOURCE:       return {         ...state,         status:'new_source', \/\/BARIS BARU         source: action.url       }   }   return state; };<\/code><\/pre>\n\n\n\n
            Inisialisasi VideoWrapper<\/code> & coba dispatch action pake URL video:<\/p>\n\n\n\n
            import VideoWrapper from '.\/video_wrapper'; \/\/dst \/\/init videowrapper VideoWrapper(videoStore); \/\/coba videoStore.dispatch(Actions.setSource('\/\/vjs.zencdn.net\/v\/oceans.mp4'));<\/code><\/pre>\n\n\n\n
            \"\"<\/figure><\/div>\n\n\n\n
            Karena statusnya nanti variatif, biar lebih aman kita bikin konstanta buat status<\/code>:<\/p>\n\n\n\n
            \/\/file: status.js export const NEW_SOURCE = 'new_source'; export const PLAY_REQUESTED = 'play_requested'; export const PLAYING = 'playing'; export const PAUSE_REQUESTED = 'pause_requested'; export const PAUSED = 'paused';<\/code><\/pre>\n\n\n\n
            Update src\/index.js<\/code> & src\/video_wrapper.js<\/code>, pake konstan di atas:<\/p>\n\n\n\n
            \/\/file: src\/index.js import * as Status from '.\/status'; \/\/dsb \/\/di videoStateReducer(): switch(action.type){   case Actions.SET_SOURCE:     return {       ...state,       status: Status.NEW_SOURCE, \/\/pake konstanta       source: action.url     } } \/\/dsb<\/code><\/pre>\n\n\n\n
            \/\/file: src\/video_wrapper.js import * as Status from '.\/status'; \/\/dsb   store.subscribe(( )=>{     const state = store.getState();     if(state.status === Status.NEW_SOURCE){       videoEl.src = state.source;     }   }); \/\/dsb<\/code><\/pre>\n\n\n\n
            Input UI<\/h4>\n\n\n\n
            Bikin file src\/ui\/source-input.js<\/code>.<\/p>\n\n\n\n
            \/\/file: src\/ui\/source-input.js import { setSource } from '..\/actions'; const SourceInput = (store)=>{   const input = document.querySelector('input[name=video-source]');   \/\/default video   input.setAttribute('value','\/\/vjs.zencdn.net\/v\/oceans.mp4');   const btn = document.getElementById('load-src-btn');   btn.addEventListener('click', (e)=>{     e.preventDefault();     \/\/kalo input nggak kosong,     \/\/dispatch action SET_SOURCE     if(input.value){       store.dispatch(setSource(input.value));     }   }) } export default SourceInput;<\/code><\/pre>\n\n\n\n
            Balik ke src\/index.js<\/code>:<\/p>\n\n\n\n
            \/\/file: src\/index.js \/\/import dulu import SourceInput from '.\/ui\/source-input'; \/\/dsb \/\/scroll ke bawah ... \/\/init videowrapper VideoWrapper(videoStore); \/\/init SourceInput SourceInput(videoStore); \/\/komen atau hapus baris ini \/\/videoStore.dispatch(Actions.setSource('\/\/vjs.zencdn.net\/v\/oceans.mp4'));<\/code><\/pre>\n\n\n\n
            \"\"<\/figure><\/div>\n\n\n\n
            Play & Pause<\/h3>\n\n\n\n
            Sekarang bikin logic utk play & pause video. Mulai dari reducer.<\/p>\n\n\n\n
            \/\/file: src\/index.js const videoStateReducer = (state = defaultVideoState, action) => {   console.log('VideoStateReducer','state',state,'action', action);   switch(action.type){     case Actions.SET_SOURCE:       return {         ...state,         status: Status.NEW_SOURCE,         source: action.url       }     case Actions.PLAY: \/\/ handel action PLAY di sini       return {         ...state,         \/\/update state.status         status: Status.PLAY_REQUESTED       }     case Actions.PAUSE: \/\/handel action PAUSE       return{         ...state,         status: Status.PAUSE_REQUESTED       }   }   return state; };<\/code><\/pre>\n\n\n\n
            Update src\/video_wrapper.js<\/code>, tambahin blok else-if<\/em> untuk handel PLAY_REQUESTED<\/code>.<\/p>\n\n\n\n
            store.subscribe(() => {     const state = store.getState();     if (state.status === Status.NEW_SOURCE) {       videoEl.src = state.source;     } else if (state.status === Status.PLAY_REQUESTED) {       \/\/blok if baru utk handle status PLAY_REQUESTED       if (videoEl.src) {         \/\/kalo source udah diset, maenin videonya         videoEl.play();       }     } else if(state.status === Status.PAUSE_REQUESTED){       if(videoEl.src) {         \/\/pause videonya         videoEl.pause();       }     }   });<\/code><\/pre>\n\n\n\n
            Play \u2013 Pause UI<\/h4>\n\n\n\n
            Lanjutin bikin UI. Tombol Play bukan cuma untuk play<\/em>, tapi juga dipake untuk pause<\/em>. Jadi kita bikin file src\/ui\/playpause-btn.js<\/code>.<\/p>\n\n\n\n
            \/\/file: src\/ui\/playpause-btn.js import * as Status from '..\/status'; import { play, pause } from '..\/actions'; const PlayPauseBtn = (store) => {   const btn = document.getElementById('play-pause-btn');   btn.addEventListener('click', (e) => {     e.preventDefault();     const status = store.getState().status;     if (status === Status.PLAYING) {       store.dispatch(pause());     } else {       store.dispatch(play());     }   })   \/\/update label   store.subscribe(() => {     const state = store.getState();     if (state.status === Status.PLAYING) {       btn.innerHTML = 'Pause';     } else if(state.status === Status.PAUSED) {       btn.innerHTML = 'Play';     }   }) }; export default PlayPauseBtn;<\/code><\/pre>\n\n\n\n
            Ternyata kita belum punya action untuk update video state ( PLAYING & PAUSE ). Jadi bikin dulu generatornya:<\/p>\n\n\n\n
            \/\/file: src\/actions.js export const VIDEO_STATUS_CHANGED = 'VIDEO_STATUS_CHANGED' \/\/...scroll ke bawah \/\/bikin action generator export const videoStatusChanged = ( status )=>({   type: VIDEO_STATUS_CHANGED,   status })<\/code><\/pre>\n\n\n\n
            Nanti yang dispatch action ini adalah VideoWrapper<\/code> karena dia yang punya elemen <video><\/code>, jadi kita update dulu:<\/p>\n\n\n\n
            \/\/file: src\/video_wrapper.js\n\nimport * as Status from '.\/status';\n\/\/import action yg baru\nimport { videoStatusChanged } from '.\/actions';\n\nconst VideoWrapper = (store) => {\n  const videoEl = document.getElementById('myvideo');\n  \/\/pasang listener buat 'playing' event\n  videoEl.addEventListener('playing', (e) => {\n    store.dispatch(videoStatusChanged(Status.PLAYING));\n  });\n  \/\/pasang listener buat 'pause' event\n  videoEl.addEventListener('pause', (e) => {\n    store.dispatch(videoStatusChanged(Status.PAUSED));\n  });\n\n  \/\/ ...dsb\n\n  });\n\n}\n\nexport default VideoWrapper;\n\n\nTime Label\nUntuk update time-label ( yang nunjukin waktu sekarang & durasi video), kita bikin dulu actionnya.\n\n\/\/file: src\/actions.js\n\n\/\/...dsb\nexport const UPDATE_TIME = 'UPDATE_TIME';\n\n\/\/... dsb\n\/\/scroll ke bawah\n\nexport const updateTime = ({time,duration})=>({\n  type: UPDATE_TIME,\n  time,\n  duration\n});Copy\nTerus update reducer.\n\nconst videoStateReducer = (state = defaultVideoState, action) => {\n  \/\/ ...dsb\n  switch(action.type){\n    \/\/...dsb\n    \/\/bikin case baru buat action UPDATE_TIME\n    case Actions.UPDATE_TIME:\n      return {\n        ...state,\n        time: action.time,\n        duration: action.duration\n      }\n  }\n  return state;\n};Copy\nSekarang bikin modul UI nya.\n\n\/\/file: src\/ui\/time-ui.js\nimport * as Status from '..\/status';\n\nconst TimeUI = (store)=>{\n\n  const timeInput = document.querySelector('input[name=time]');\n  const duration = document.getElementById('duration');\n\n  store.subscribe(()=>{\n    const state = store.getState();\n    \/\/update time & duration\n    timeInput.value = state.time;\n    duration.innerHTML = state.duration;\n  })\n};\n\nexport default TimeUI;\n\nSeek \/ Scrub\nKenapa time label saya bikin pake <input>? Karena mau saya pake untuk seeking\/scrubbing video.\n\nKayak yg sebelumnya, bikin reducernya dulu:\n\n\/\/file: src\/index.js\nconst videoStateReducer = (state = defaultVideoState, action) => {\n\n  switch(action.type){\n    \/\/... dsb\n    case Actions.SEEK:\n      return{\n        ...state,\n        status: Status.SEEK_REQUESTED,\n        time: action.time\n      }\n  }\n  return state;\n};Copy\nBikin juga konstanta buat status nya:\n\n\/\/file: src\/status.js\n\/\/...dsb\nexport const SEEK_REQUESTED = 'seek_requested';Copy\nKembali ke modul TimeUI. Kita pake <input> untuk seeking. Jadi kita ketikin mau forward\/rewind ke detik ke berapa. Pas input-nya nggak fokus ( focusout) , modul ini kirim action SEEK_REQUESTED.\n\n\/\/file: src\/ui\/time-ui.js\nimport * as Status from '..\/status';\nimport { seek } from '..\/actions';\n\nconst TimeUI = (store) => {\n\n  \/\/----- HANDEL FOCUS IN & OUT -----\/\/\n\n  \/\/buat simpan value yang lama sebelum fokus\n  let valueBeforeFocused = undefined;\n\n  const timeInput = document.querySelector('input[name=time]');\n  timeInput.addEventListener('focusin', () => {\n    \/\/nilai yang lama sebelum focus\n    valueBeforeFocused = timeInput.value;\n  });\n\n  timeInput.addEventListener('focusout', () => {\n    \/\/kalo value yang baru nggak sama dengan yang lama\n    if (timeInput.value != valueBeforeFocused) {\n      \/\/dispatch seek action\n      store.dispatch(seek(timeInput.value));\n    }\n  });\n  const duration = document.getElementById('duration');\n\n  \/\/... dsb\n\n};\n\nexport default TimeUI;Copy\nKarena value diupdate secara otomatis selama video berjalan, kita perlu stop update kalo inputnya lagi fokus (focusin). Kita bikin flag isFocused yang nilainya tergantung status focus elemen <input>. Jadi kita update beberapa baris:\n\n\/\/file: src\/ui\/time-ui.js\nimport * as Status from '..\/status';\nimport { seek } from '..\/actions';\n\nconst TimeUI = (store) => {\n\n  let isFocused = false;\n\n  timeInput.addEventListener('focusin', () => {\n    \/\/set isFocused\n    isFocused = true;\n    \/\/..dsb\n  });\n\n  timeInput.addEventListener('focusout', () => {\n    \/\/reset isFocused\n    isFocused = false;\n    \/\/...dsb\n  });\n\n  \/\/...dsb\n\n  store.subscribe(() => {\n    const state = store.getState();\n    \/\/update input value kalo\n    \/\/lagi nggak fokus\n    if (!isFocused) {\n      timeInput.value = state.time;\n    }\n    duration.innerHTML = state.duration;\n  })\n};\n\nexport default TimeUI;<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
            Redux merupakan back-end yang berkolaborasi dengan react native. Belajar framework baru merupakan hal yang menantang dan mmanaenyusahkan, namun sekali menemukan alur pengkodean (menulis code) akan lebih mudah untuk mengimplementasikan. Menjadi seorang pemula dalam Redux membuat saya … <\/p>\n","protected":false},"author":1,"featured_media":200,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[59],"class_list":["post-199","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-teknologi","tag-redux"],"_links":{"self":[{"href":"https:\/\/sentraldigitalindonesia.co.id\/blog\/wp-json\/wp\/v2\/posts\/199","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sentraldigitalindonesia.co.id\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sentraldigitalindonesia.co.id\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sentraldigitalindonesia.co.id\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sentraldigitalindonesia.co.id\/blog\/wp-json\/wp\/v2\/comments?post=199"}],"version-history":[{"count":2,"href":"https:\/\/sentraldigitalindonesia.co.id\/blog\/wp-json\/wp\/v2\/posts\/199\/revisions"}],"predecessor-version":[{"id":202,"href":"https:\/\/sentraldigitalindonesia.co.id\/blog\/wp-json\/wp\/v2\/posts\/199\/revisions\/202"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sentraldigitalindonesia.co.id\/blog\/wp-json\/wp\/v2\/media\/200"}],"wp:attachment":[{"href":"https:\/\/sentraldigitalindonesia.co.id\/blog\/wp-json\/wp\/v2\/media?parent=199"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sentraldigitalindonesia.co.id\/blog\/wp-json\/wp\/v2\/categories?post=199"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sentraldigitalindonesia.co.id\/blog\/wp-json\/wp\/v2\/tags?post=199"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}