tags: 鐵人賽 React javascript nodejs vscode

鐵人賽第十三天，今天依舊工作滿檔，issue滿滿，但就像九把刀說的～「時間就像乳溝一樣，擠一下就有了」，我在通勤的路上，開啟了今天的鐵人賽。

先聊聊state action

• useState可以讓我們控制狀態，而控制的部分一般只能搭配一個func來執行。
• 那如果我們希望同一個state能搭配多種不同的控制，要如何用有效率的撰寫呢?

UseReducer~救世主般降臨

• 過去React要控制複雜的state，必須要靠Redux套件來實現，不過，在React V16.8之後，提出了useReducer，讓React就像開了開了Turbo一樣，看不到車尾燈！

UseReducer的用法

• 我們用底下的範例，來讓各位初步了解他的用法

import React, { useReducer } from "react";  //<-- step1: import {useReducer}

// Step2: 建立一個function, 有state及action兩個參數
//        並利用switch(action.type)建立多個控制state的動作
function myReducer(state, action){
  switch(action.type){
    case "A":
      return "A action";
    case "B":
      return "B action"; 
    case "C":
      return "C action"; 
    default:
      return state;
  }

}


function YourComp(){
  // step3: 呼叫useReducer並給予你的reducer func及初始狀態，
  //        回傳的array[0]: state
  //        回傳的array[1]: dispatch, 一種新的stateFunc,但他會自動連結你的reducer func，進行switch(action.type)的分析
  const [state, dispatch] = useReducer(myReducer, initState); 

  return (
   ...
   {//<--Step4: 我們用一個button的onClick事件來呼叫dispatch，並放入swtch中的case，來完成對應的動作}
   <button onClick={()=>dispatch({type:"A"})}></button> 
   ...
  );
}

用useReducer給他實作一個範例下去

先來一個簡單的範例，需求如下：

 - 建立一個<h1> title，顯示對應的按鈕文字
 - 3個按鈕，每個按鈕對應不同的文字，並顯示於<h1>上

• 建立資料夾./src/components/ReducerExample
• 新增檔案./src/components/ReducerExample/ShowDiffText.js，編輯如下

//ShowDiffText.js
 
import React, { useReducer } from "react";

// 建立reducer func
function myReducer(state, action) {
  switch (action.type) {
    case "A":
      return "Press A";
    case "B":
      return "Press B";
    case "C":
      return "Press C";
    default:
      return state;
  }
}

export default function ShowDiffText() {
  const [state, dispatch] = useReducer(myReducer, "Reducer Demo"); //宣告 useReducer
  return (
    <>
      <h2>{state}</h2>
      <div>
        <button onClick={() => dispatch({type:"A"})}>A</button>
        <button onClick={() => dispatch({type:"B"})}>B</button>
        <button onClick={() => dispatch({type:"C"})}>C</button>
      </div>
    </>
  );
}

• 修改index.js

import React from 'react';
import ReactDOM from 'react-dom';
import ShowDiffText from "./components/ReducerExample/ShowDiffText";

ReactDOM.render(
  <ShowDiffText/>,
  document.getElementById('root')
);

跑起來試試

• 初始狀態
  

• 按下A
  

• 按下B
  

• 按下C
  

• 厚厚厚...是不是很威，這幾個步驟，就能賦予你的state多了許多的控制，這樣的設計，更能賦予component有更多的可能，程式的維護也更加便利！帥呆了我！
  

結論

• 今天我們學會了如何賦予一個狀態(state)有多個控制動作(action)，當一個component有更多的動作，創造絢麗奪目網的網頁，不再是難事。
• 鐵人賽第13天，我在通勤的路上，完成了這篇文章，老闆交代的事固然重要，但鐵人賽的事可是我人生重要的里程碑，潛能全開，及小宇宙通通燃燒起來，咱們繼續Rock~~