• 日本語
    • English (英語)
Avintonジャパン株式会社Avintonジャパン株式会社Avintonジャパン株式会社Avintonジャパン株式会社
  • サービス
    • Avinton Data Platform
    • エッジAIカメラ
    • プライベートクラウド
    • AIサービス開発
    • AI画像解析 – 無償PoC
  • 最新情報
    • ニュースリリース&イベント情報
    • 技術ブログ&インタビュー
  • アカデミー
    • Avintonアカデミー
    • Academy on Campus
  • 採用情報
    • Avintonで働く魅力
    • 新卒採用
    • プロジェクトコーディネーター職紹介
    • 求人
    • よくある質問
  • 企業情報
    • 会社概要
    • 代表からご挨拶
    • SDGsへの貢献
  • お問い合わせ

Redux基礎 – 主要な概念と用語

  • Python3.8 と OpenCV のインストール (Ubuntu20.04LTS)
  • ルーティング
  • postgreSQLへのshp fileのimport
  • NAT
  • PostGIS exercise
  • 三目並べ – 2.〇×を交互にゲーム盤に入るようにしよう
  • Docker 概要とセットアップ
  • 三目並べ – 3.勝敗がつくようにしよう
  • Docker Engineのubuntu上へのinstall
  • EC2からS3へ自動でぽいぽいアップロードするスクリプトの作成
  • 三目並べ – 4.「スタート」「リセット」ボタンをつけよう
  • 三目並べ – 5.先攻後攻を決めて、コンピュータ対戦にしよう(前編)
  • Apache Zeppelin 基本機能
  • Ruby on Rails を MySQLでセットアップ
  • 機械学習入門者向け Support Vector Machine (SVM) に触れてみる
  • AWSアカウントの作成と必ずやるべきセキュリティ対策
  • Scala 基礎
  • VLAN
  • Apache Spark 基礎
  • 機械学習を用いた画像分類
  • Ruby on Railsによる簡単なウェブアプリケーション
  • 正規表現とパイプ
  • 機械学習エンジニアに必要なスキル
  • Docker, Kubernetesの学び方について
  • Ubuntuの基本設定
  • PostgreSQL Setup
  • REDIS
  • Amazon EC2 インスタンスの初期設定をしよう
  • 軽量版Kubernetesディストリビューション – k0s クラスターの構築
  • Pythonの設定
  • GNS3のセットアップ
  • viエディタ
  • AWSのEC2インスタンスでWordPressブログを公開してみよう
  • Pythonでデータベースを操作する
  • Python2.7とOpenCVのインストール
  • ファイル操作コマンド
  • OpenCVのテストプログラム
  • グループとユーザー
  • Pythonで画像を分類するプログラムを作成する
  • AWS CLIをインストールしてコマンド操作しよう
  • Virtualisation and Container (仮想化とコンテナ) – Ansible, Docker and Kubernetes
  • Windows Server 2012 R2 Hyper-V
  • 困った時に使うコマンド
  • SparkMLによるKaggle Titanic生存者予測
  • PacketTracerのセットアップ
  • 一般グループのユーザーとグループ
  • AWS Route 53を使って独自ドメインのWebページを表示させてみよう
  • Kubernetesクラスター上へのOpenVINOモデルサーバーを使用したサンプルアプリケーションのデプロイ
  • プライバシーポリシー
  • VMware ESXi サーバー構築
  • 三目並べ – 6.先攻後攻を決めて、コンピュータ対戦にしよう(後編)
  • フロントエンド開発のための環境構築
  • フロントエンドのデモンストレーション
  • APIのデモンストレーション
  • CISCO 1800ルータセットアップ
  • ファイル検索コマンド
  • ESXi – Switchの追加とVLAN
  • 質問
  • 仮想化環境のディスク容量を拡張する
  • ユーザー権限とアクセス権
  • 三目並べ – 0.導入
  • テキスト処理
  • ESXi – VyOS
  • データベースへのデータロード
  • 機械学習入門者向け Naive Bayes(単純ベイズ)アルゴリズムに触れてみる
  • CCNA
  • ESXi – 小規模ネットワーク 構築
  • ファイル管理
  • Webアプリ開発に欠かせないGoogle Chrome DevToolsの基本
  • 機械学習入門者向け ChainerRLでブロック崩しの学習
  • AWS CLIを使ってEC2のファイルをS3へアップロードしよう
  • Apache NiFiの環境設定
  • CSV import & export – Node.js, mySQL – 1
  • 機械学習入門者向け ランダムフォレストによる Kaggle Titanic生存者予測
  • NodeJSでWebアプリケーション開発 – Socket.IO編
  • CSV import & export – Node.js, mySQL – 2
  • Apache NiFi データパイプライン基礎
  • PCからルータ、スイッチへのSSH接続設定
  • 【Python入門】Python Numpy チュートリアル
  • SQL 便利な関数
  • PostgreSQLによるデータ分析
  • Apache NiFi Exercise
  • 機械学習入門者向け 分類と回帰の違いをプログラムを書いて学ぼう
  • NodeJSでWebアプリケーション開発 – React編
  • Pythonによるマルチスレッドプログラミング実践
  • Apache SparkとApache Zeppelinの概要と環境構築
  • Certbotを使ってSSL証明書を発行し、HTTP通信を暗号化しよう
  • DockerとApacheを使ってWebサーバーを構築しよう
  • NodeJSでWebアプリケーション開発 – React編
  • Redux基礎 – 主要な概念と用語
  • Apache Superset 概要と環境構築
  • AmazonEC2とVPCでネットワークとサーバーを構築しよう
  • AWS入門者向け 初心者が最初に理解すべきEC2とVPCの基本的な用語解説
  • Linuxとは
  • Pandasによる構造化データ分析
  • Apache Superset 基礎
  • Dockerコンテナイメージの最適化/ベストプラクティス
  • ダイナミックルーティング
  • PostgreSQL – Python – Apache – Bootstrap
  • 三目並べ – 1.ゲーム盤を作ろう
Home Avintonアカデミー Redux基礎 – 主要な概念と用語
Redux logo

こちらの記事では、Reduxの主要な概念と用語について説明します。また、Reduxとよく併用されるRedux DevToolsという便利なブラウザの拡張機能を紹介します。

Reduxとは

Reduxは、「Action」と呼ばれるイベントを使用して、アプリケーションのState(状態)を管理し、更新するためのフレームワークです。 アプリケーションの多くの部分で必要なStateを、グローバルなStateとして一元管理するのに役立ちます。

React、jQuery、Angular、Vueといったライブラリと併用できます。

Reduxデータフロー

こちらがReduxを使用した際のデータの流れです。この図をもとにReduxの主要概念と用語について説明していきます。Redux基礎 - 主要な概念と用語

出典:Redux Application Data Flow

1. ユーザーの入力をもとにActionを作成
2. ActionをStoreへDispatch(送信)する
3. ActionをもとにReducerがStateを更新
4. StateをもとにUIを更新

 

1. ユーザーの入力をもとにActionを作成

Redux基礎 - 主要な概念と用語

ユーザーがUI上のボタン(Deposit $10)をクリックすると、ActionCreatorによって、Actionが作成されます。

Action

Actionは、typeフィールドを持つJavaScriptオブジェクトであり、アプリケーション上で起こったイベント(ユーザーがボタンを押すなど)と考えてよいでしょう。

typeフィールドは、文字列である必要があります。

Actionオブジェクトには、発生したイベントに関する追加情報を含めることができます。慣例により、その情報をpayloadと呼ばれるフィールドに入れます。今回の例では、「Deposit $10」というボタンがクリックされたので、以下のように「10」がpayloadになります。

1
2
3
4
{
  type: 'deposit',
  payload: 10
}

ActionCreator

ActionCreatorは、以下のようにActionオブジェクトを返す関数です。通常はこれらを使用するため、毎回Actionオブジェクトを別で作成する必要はありません。

1
2
3
4
5
6
const deposit = () => {
  return {
    type: 'deposit',
    payload: 10
  }
}

2. ActionをStoreへDispatch(送信)する

Redux基礎 - 主要な概念と用語

ActionCreatorによって作成されたActionオブジェクトをStoreへ送ります。

Store

Storeは、Reduxアプリケーションの状態を保持するオブジェクトです。後述するReducerを渡すことによって作成されます。

1
2
3
import { configureStore } from '@reduxjs/toolkit'
 
const store = configureStore({ reducer: accountReducer })

Dispatch

Redux StoreのDispatchと呼ばれるメソッドは、状態を更新する唯一の方法で、Actionオブジェクトを引数にとります。Storeにイベントが発生したことを知らせる役割を担っています。

1
store.dispatch(deposit())

3. ActionをもとにReducerがStateを更新

 

Redux基礎 - 主要な概念と用語

 

DispatchされたActionと現在保持しているStateが、Store内のReducerに渡され、新しいStateを作成します。

Reducer

Reducerは、StateとActionオブジェクトを受け取り、新しいStateを返す関数です。Reducerは、受信したAction typeに基づいてイベントを処理するイベントリスナーとして機能します。

Reducerを作成するときは、以下の点に気を付ける必要があります。

  • 既存のStateに変更を加えることはできません。その代わり、現在保持しているStateをコピーし、コピーされた値に変更を加えることによって、更新を行うことができます。
  • 非同期ロジックを実行するといった「副作用」を引き起こしてはいけません。

以下のコードは、シンプルなReducerの例です。Action typeが”deposit”であれば、”account”にpayload($10)が加算され、新たなStateが作成されます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const initialState = { account: 0 }
 
const accountReducer = (state = initialState, action) => {
  // dispatchされたactionのタイプがこのReducerのものと一致するかチェック
  switch (action.type) {
    case 'deposit': {
      // 一致していたら、stateのコピーを作成
      return {
        ...state,
        // コピーされたstateの値を更新
        account: state.account + action.payload,
      };
    }
    // 条件が当てはまらなければ、もともとのStateを返す
    default:
      return state;
  }
};

4. StateをもとにUIを更新

 

Redux基礎 - 主要な概念と用語

 

最後に、Reducerによって新たに作成されたStateをもとに、UIが更新されます。

Redux DevTools拡張機能

Reduxと併用されることの多いRedux DevToolsというブラウザの拡張機能を紹介します。Redux DevToolsはStateが予期した通りに更新されているかを確認するのに役立ちます。

インストール&セットアップ方法

インストール方法

以下のリンクから、お使いのブラウザに拡張機能を追加してください。

  • Google Chrome:chrome ウェブストア
  • Firefox:Firefox Browser ADD-ONS
  • その他のブラウザ:remote-redux-devtools

セットアップ方法

Storeを定義するときに、configureStoreのdevToolsをtrueにすることで、開発中のアプリとRedux DevToolsを連携させることができます。

通常は、以下の例のように環境変数(process.env.NODE_ENV)を設定し、開発中のみ使用できるようにします。プロダクションで使用されない理由は、Redux DevtoolsがStateのデバッグを可能にするという重い処理をおこなっており、アプリケーションのパフォーマンスを落とさないようにするためです。

1
2
3
4
const store = configureStore({
  reducer: accountReducer,
  devTools: process.env.NODE_ENV !== 'production',
});

使い方

f12キーでブラウザの開発者ツールを開き、Reduxタブをクリックすると、以下のような画面になります。

Redux基礎 - 主要な概念と用語

Action

UI上で何かイベントを起こす(”Deposit $10″ & “Withdraw $10″をクリックする)と、以下のように開発者ツールの左側にDispatchされたActionの履歴が表示されます。そのうちの一つをクリックすると、Actionタブの下にActionオブジェクトの中身を確認することができます。

Redux基礎 - 主要な概念と用語

State

Stateタブをクリックすると、選択したActionがDispatchされた時点のStateを確認することができます。また、画面右下の「<」ボタンをクリックすると、過去のStateに遡ぼり、UIの変化を確認することができます。これにより、簡単にデバッグをおこなうことができ、アプリケーションへの理解を助けてくれます。

Redux基礎 - 主要な概念と用語

参考

  • Redux Essentials, Part 1: Redux Overview and Concepts
  • Redux DevTools Extension

 

あなたも、Avintonでこのような最先端技術を習得し活用してみませんか?

社員の成長を導きながら、AIやビッグデータなどの最先端技術をプロジェクトに活用していくことが私たちのビジョンです。Avintonの充実した技術研修でスキルアップを図り、あなたのキャリア目標を一緒に達成しませんか?

採用情報

採用情報

採用情報

Avinton SDGs

SDGsへの貢献

Search

タグ

AI AI Big Data Big Data ccna Digital Transformation DX IoT IoT LPIC Python Ruby SDGs Webエンジニア イベント インタビュー インフラエンジニア エンジニア オンラインセミナー キャリアチェンジ コンテナ技術 サーバーエンジニア システム開発 データサイエンス データベース データ分析 データ解析 ネットワークエンジニア ビックデータ 人工知能 仮想化 勉強会 営業 就職活動 技術インターン 採用 新卒 新卒採用 新規事業 機械学習 派遣 深層学習 社員インタビュー 経営者交流会 転職
© 2022 Avinton | All Rights Reserved | プライバシーポリシー
  • サービス
    • Avinton Data Platform
    • エッジAIカメラ
    • プライベートクラウド
    • AIサービス開発
    • AI画像解析 – 無償PoC
  • 最新情報
    • ニュースリリース&イベント情報
    • 技術ブログ&インタビュー
  • アカデミー
    • Avintonアカデミー
    • Academy on Campus
  • 採用情報
    • Avintonで働く魅力
    • 新卒採用
    • プロジェクトコーディネーター職紹介
    • 求人
    • よくある質問
  • 企業情報
    • 会社概要
    • 代表からご挨拶
    • SDGsへの貢献
  • お問い合わせ
  • 日本語
    • English (英語)
Avintonジャパン株式会社