コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > React の useReducer フックを使用した状態管理をマスターする

React の useReducer フックを使用した状態管理をマスターする

Patricia Arquette
リリース： 2024-10-20 13:02:02
オリジナル
543 人が閲覧しました

React アプリケーションを構築する場合、特に相互に依存する複数の状態変数を扱う場合、状態の管理が複雑になる可能性があります。このような状況に陥った場合は、useReducer Hook の威力を試してみましょう!

useReducer とは何ですか?
useReducer Hook は、予測可能な方法で状態を管理するための強力なツールです。これにより、複雑な状態ロジックをクリーンかつ組織的に管理できるようになり、コードの保守性が向上します。

構文
useReducer フックは 2 つの引数を受け入れます:

useReducer(reducer, initialState)
ログイン後にコピー

reducer: カスタム状態ロジックを含む関数。
InitialState: コンポーネントの初期状態 (通常はオブジェクト)。

仕組み

  1. 現在の状態: 最新にディスパッチされたアクションに基づく現在の状態の値。
  2. ディスパッチメソッド: 状態を更新するためにリデューサーにアクションを送信できる関数

1.例:
useReducer フックを使用してカウンターを管理する方法の簡単な例を次に示します。

import React, { useReducer } from "react";

// Define the initial state
const initialState = { count: 0 };

// Define the reducer function
const reducer = (state, action) => {
  switch (action.type) {
    case "increment":
      return { count: state.count + 1 };
    case "decrement":
      return { count: state.count - 1 };
    default:
      return state;
  }
};

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);

  // Inline styles
  const containerStyle = {
    maxWidth: "400px",
    margin: "50px auto",
    padding: "20px",
    borderRadius: "10px",
    boxShadow: "0 4px 20px rgba(0, 0, 0, 0.2)",
    textAlign: "center",
    backgroundColor: "#ffffff",
    fontFamily: "'Roboto', sans-serif",
  };

  const headingStyle = {
    fontSize: "2.5rem",
    margin: "20px 0",
    color: "#333333",
  };

  const buttonStyle = {
    margin: "10px",
    padding: "12px 24px",
    fontSize: "1.1rem",
    border: "none",
    borderRadius: "5px",
    cursor: "pointer",
    transition: "background-color 0.3s, transform 0.3s",
    outline: "none",
    boxShadow: "0 2px 10px rgba(0, 0, 0, 0.1)",
  };

  const incrementButtonStyle = {
    ...buttonStyle,
    backgroundColor: "#28a745",
    color: "white",
  };

  const decrementButtonStyle = {
    ...buttonStyle,
    backgroundColor: "#dc3545",
    color: "white",
  };

  // Hover and active styles
  const buttonHoverStyle = {
    filter: "brightness(1.1)",
    transform: "scale(1.05)",
  };

  return (
    <div style={containerStyle}>
      <h1 style={headingStyle}>Count: {state.count}</h1>
      <button
        style={incrementButtonStyle}
        onMouseOver={(e) =>
          (e.currentTarget.style = {
            ...incrementButtonStyle,
            ...buttonHoverStyle,
          })
        }
        onMouseOut={(e) => (e.currentTarget.style = incrementButtonStyle)}
        onClick={() => dispatch({ type: "increment" })}
      >
        Increment
      </button>
      <button
        style={decrementButtonStyle}
        onMouseOver={(e) =>
          (e.currentTarget.style = {
            ...decrementButtonStyle,
            ...buttonHoverStyle,
          })
        }
        onMouseOut={(e) => (e.currentTarget.style = decrementButtonStyle)}
        onClick={() => dispatch({ type: "decrement" })}
      >
        Decrement
      </button>
    </div>
  );
}

export default Counter;
ログイン後にコピー

出力:

Mastering State Management with the useReducer Hook in React

2.例:

import React, { useReducer, useState } from "react";

// Define the initial state
const initialState = {
  todos: [],
};

// Define the reducer function
const reducer = (state, action) => {
  switch (action.type) {
    case "ADD_TODO":
      return { ...state, todos: [...state.todos, action.payload] };
    case "REMOVE_TODO":
      return {
        ...state,
        todos: state.todos.filter((todo) => todo.id !== action.payload),
      };
    default:
      return state;
  }
};

function TodoApp() {
  const [state, dispatch] = useReducer(reducer, initialState);
  const [inputValue, setInputValue] = useState("");

  const handleAddTodo = () => {
    if (inputValue.trim()) {
      dispatch({
        type: "ADD_TODO",
        payload: { id: Date.now(), text: inputValue },
      });
      setInputValue(""); // Clear input field
    }
  };

  // Internal CSS
  const styles = {
    container: {
      maxWidth: "600px",
      margin: "50px auto",
      padding: "20px",
      borderRadius: "10px",
      boxShadow: "0 4px 20px rgba(0, 0, 0, 0.1)",
      backgroundColor: "#f9f9f9",
      fontFamily: "'Arial', sans-serif",
    },
    heading: {
      textAlign: "center",
      fontSize: "2.5rem",
      marginBottom: "20px",
      color: "#333",
    },
    input: {
      width: "calc(100% - 50px)",
      padding: "10px",
      borderRadius: "5px",
      border: "1px solid #ccc",
      fontSize: "1rem",
      marginRight: "10px",
    },
    button: {
      padding: "10px 15px",
      fontSize: "1rem",
      border: "none",
      borderRadius: "5px",
      backgroundColor: "#28a745",
      color: "white",
      cursor: "pointer",
      transition: "background-color 0.3s",
    },
    buttonRemove: {
      padding: "5px 10px",
      marginLeft: "10px",
      fontSize: "0.9rem",
      border: "none",
      borderRadius: "5px",
      backgroundColor: "#dc3545",
      color: "white",
      cursor: "pointer",
      transition: "background-color 0.3s",
    },
    todoList: {
      listStyleType: "none",
      padding: 0,
      marginTop: "20px",
    },
    todoItem: {
      display: "flex",
      justifyContent: "space-between",
      alignItems: "center",
      padding: "10px",
      borderBottom: "1px solid #ccc",
      backgroundColor: "#fff",
      borderRadius: "5px",
      marginBottom: "10px",
    },
  };

  return (
    <div style={styles.container}>
      <h1 style={styles.heading}>Todo List</h1>
      <div style={{ display: "flex", justifyContent: "center" }}>
        <input
          style={styles.input}
          type="text"
          value={inputValue}
          onChange={(e) => setInputValue(e.target.value)}
          placeholder="Add a new todo"
        />
        <button style={styles.button} onClick={handleAddTodo}>
          Add Todo
        </button>
      </div>
      <ul style={styles.todoList}>
        {state.todos.map((todo) => (
          <li style={styles.todoItem} key={todo.id}>
            {todo.text}
            <button
              style={styles.buttonRemove}
              onClick={() =>
                dispatch({ type: "REMOVE_TODO", payload: todo.id })
              }
            >
              Remove
            </button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default TodoApp;
ログイン後にコピー

出力:

Mastering State Management with the useReducer Hook in React

useReducerHook は、React ツールキットへの優れた追加です。これにより、複雑な状態管理を効率的に処理できるようになり、アプリケーションがより堅牢になり、保守が容易になります。次のプロジェクトで試してみて、状態管理を次のレベルに引き上げてください!

以上がReact の useReducer フックを使用した状態管理をマスターするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース：dev.to
前の記事：JavaScript で DOM が使えるようになるのはいつですか? 次の記事：jQuery は一重引用符と二重引用符で JSON 構文を異なる方法で処理しますか?
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
から 2024-04-29 11:01:01
0
3
2166
Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
から 2024-04-23 00:22:19
0
11
2315
子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
から 2024-04-19 15:37:47
0
1
1950
親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
から 2024-04-18 23:52:34
0
1
1828
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
1880
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート