JavaScript/React/useReducerをラップしたカスタムフックのバックアップ差分(No.1)

バックアップ一覧
現在との差分を表示
ソースを表示
バックアップを表示
JavaScript/React/useReducerをラップしたカスタムフックへ行く。
- 1 (2021-03-21 (日) 11:24:21)

追加された行はこの色です。
削除された行はこの色です。

#author("2021-03-21T11:24:21+09:00","default:ryuichi","ryuichi")
* useReducer [#r2ec74ea]

#sh(javascript){{

 import React, { useState, useReducer } from 'react';
 import ReactDOM from 'react-dom';
 
 const App = () => {
   const [state, dispatch] = useReducer(
     (state, action) => {
       switch (action.type) {
         case "ADD": {
           return { ...state, count: state.count + 1 };
         }
         case "SUBTRACT": {
           return { ...state, count: state.count - 1 };
         }
         default: {
           return state;
         }
       }
     },
     {
       count: 0,
     }
   );
 
   let { count } = state;
 
   const add = () => {
     dispatch({ type: "ADD" });
   };
 
   const subtract = () => {
     if (count > 0) {
       dispatch({ type: "SUBTRACT" });
     }
   };
 
   return (
     <div>
       <button onClick={subtract}>-</button>
       <div>{count}</div>
       <button onClick={add}>+</button>
     </div>
   );
 };

}}