iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 11
3
Modern Web

React 30天系列 第 11

Day 11-初探Redux(State)

前情提要:
昨天做了todos的小練習,本來預計今天要回憶過去的,但昨天做完練習後覺得,集合所有概念做出來的東西,就是一種複習。所以我們把回憶留到最後再來大回顧吧!今天直接來看看Redux~

根據Redux官網說明

Redux is a predictable state container for JavaScript apps.

Redux是一個可預測狀態(state)的容器。嗯...什麼?
聽說Redux是基於flex設計的。這...所以我要先去看flux補充先備知識嗎?
太難、太複雜、太崩潰了!
https://media.giphy.com/media/3ohhwpIXefRVaBp33O/giphy.gif

不用擔心,有資源解救像我這樣的迷途羔羊,接下來的內容會依循Valentino Gagliardi寫的React Redux Tutorial for Beginners: The Definitive Guide (2018)指南進行學習。

什麼是state?

剛剛上面提到,redux説「Redux是一個可預測狀態(state)的容器」。所以,什麼是state?
我們剛從react接到這,相信大家不陌生,一個有狀態的元件(stateful React component),就是Javascript ES6 class。

import React, { Component } from 'react';

class Example extends Component {
  constructor(props) {
    super(props);
    this.state = {     // <= state
      name: 'Yvonne'
    }
  }
  
  render() {
    return (
      <div>
        Hello, {this.state.name}
      </div>
    );
  }
}

在React的component中,state保存資料,component可能會將這些資料渲染到頁面給使用者。
但state這詞並不只存在於react裡,state就在我們的周邊!

https://media.giphy.com/media/l0MYOiRtXulpkInHW/giphy.gif

即使是最簡單的javascript應用程序都有state。
試想一個情境,當我按下一個button後,一個小視窗跳出。
即使是這種瑣碎的互動都有state存在其中。
在初始化的state我們可能會把它設定成一個javascript object。

var state = {
  buttonClicked: 'no',
  modalOpen: 'no'
}

然後當user按下按鈕後

var state = {
  buttonClicked: 'yes',
  modalOpen: 'yes'
}

除了把state存在object內之外,我們要怎麼在javascript追蹤這些內容?
有什麼函式庫(library)可以幫助我們追蹤這些state嗎?

Redux解決了什麼問題?

剛剛講到了state其實無所不在,那你可以想像在一個React應用程序裡有多少個state嗎?
只要這個應用程序一直維持小小的,或許我們可以把state儲存在父層元件中。
但事實是...
即使是一個跟我們昨天做的todosㄧ樣渣的小練習,一但開始上下傳遞state,都可能變成無法管理。
Redux解決的問題,一開始可能還不太明確,但它有助於為每個React component提供所需的確切狀態(state)。
state不再散落在各個class component,而是透過Redux幫忙集中管理於某處。

該學Redux嗎?

Redux與框架無關,畢竟它是狀態(state)管理。學一次,到處用(Vue, Angluar)也會用到狀態管理。
Redux可能消失嗎?或許會
但它的模式(pattern)是永存的,我們應該學習管理UI的pattern因為這些對我們職涯上是無價的。

該用Redux嗎?

要用Redux、Flux或Mobx都隨便你。
用這些library也是有成本的,他們增加了另一層抽象層(layer of abstraction)。
但可以把它當成投資而不是成本。
要怎麼知道什麼時候可以開始用redux呢?

考慮使用redux的情境為:

  • 有好多React components 需要傳遞相同的state,但他們不是親子關係(parent/child relationship)時
  • 當你開始對將state透過props傳遞給多個component感到困窘時

如果你覺得這對你無感時不要擔心,Valentino Gagliardi也有同感,
Dan Abramov曾說過,Flux library就像眼鏡,當你需要它的時候你就知道了。


今日總結:
今天大致上紀錄了state是什麼?為什麼需要Redux?等入門心法(?!)
找了很多資料,但看完之後覺得最親民的還是Valentino Gagliardi的這篇。
它真的非常白話,也對我幫助很大,希望它也能幫助對於入門Redux感到迷惘的其他人。


上一篇
Day 10-todos小練習
下一篇
Day 12-初探Redux(store, reducer, action)
系列文
React 30天30

尚未有邦友留言

立即登入留言