iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 8
0
Modern Web

反正我想學-Web綜合練習紀錄30天系列 第 8

反正我想學07-react- redux 前哨 (action,reducer,store).. 待補

使用Redux 前 除了知道為何你要使用它
能帶來什麼好處外,再來就是要確定你使用的react版本是哪一版本的

最明顯的差異就是在有沒有使用Hook
像我最近碰到的專案就是沒有使用Hook,在準備要開發時候才發現繞了一些彎路

也是因為我的React 技術還沒到很熟的地步 目前最新是 React Redux 7.2需要React 16.8.3或更高版本,可以用hook
我使用的是7.0 ,支援 React 16.4 以上

文章也有分 redux , react-redux
是不同的喔 !
如同我們上次提到

Redux是JavaScript狀態容器 可以讓你構建一致化的應用,運行於不同的環境(客戶端、服務器、原生應用)

你在vanilla 可以用,vue、react、angular 也可以用
Redux 介紹三個最主要的元素

這張圖的步驟非常完整
Gifa

在網頁上View操作送出事件,經過Action 釐清事件到 Reducer 處理完回傳一個新的State到網頁(View)上

Action

描述 事件發生的情況

Reducer

根據接收Action 描述的情況對資料做處理,回傳一新的個處理資料

store

儲存資料的地方,統一state

為什麼我們需要Redux呢?
沒有Redux 我們的資料流向會變成什麼樣子 ? 這張圖可以有很好的解釋
IMG

結束前看個範例 簡單的加減 計數器
套用到我們上面的 三大元素

action

store.dispatch({ type: 'INCREMENT' })

reducer

function counter(state, action) {
    if (typeof state === "undefined") {
        return 0;
    }

    switch (action.type) {
        case "INCREMENT":
        return state + 1;
        case "DECREMENT":
        return state - 1;
        default:
        return state;
    }
}

store

 var store = Redux.createStore(counter);

vanilla 範例
https://codesandbox.io/s/redux07-vanilla-hv7e0

資料來源
https://blog.mazarin.lk/productive-development-react-redux/
https://kknews.cc/code/leorgxb.html


上一篇
反正我想學06-Redux 介紹
下一篇
反正我想學08-React-Redux-TodoList(上)
系列文
反正我想學-Web綜合練習紀錄30天11
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言