React HooksによるFluxでタブを作るまで

カテゴリーから探す

年別から見る

2019/07/10

React HooksによるFluxでタブを作るまで

LaunchCartのフォームのUIを、将来的にチームで開発することも見据え、フレームワークを使って組んでみようと考えたとき、部分導入が可能で、ルールがしっかりしているReactを使うことに思い至りました。

はじめ何も考えずにReactを使ってUIを作ろうとして、意図した動作をさせることができなかったため、Reactにおけるデータの管理方法について調べた結果、Reactが公式に推奨しているFluxというアーキテクチャの存在を知りました。

Fluxはアプリケーションのデザインパターンの一つであるMVC(Model View Controller)パターンの派生としてFacebookが提唱したもので、よりデータの流れをシンプルにしたものです。

ただ、元々ReactではFluxでアプリケーションを組むためのライブラリなどは内蔵されておらず、自前で組むか、Reduxのような非公式のライブラリを導入する必要がありました。

Reduxによるアプリケーション開発が普及してきている状況で、React HooksというReact標準のライブラリが導入され、React標準でReduxライクな記述が可能になりました。

React Hooks自体は、クラスコンポーネントによる複雑な記述を脱して、関数コンポーネント中心でアプリケーション開発をできるようにするためのものです。

そのReactHooksの機能の中でも、useReducer、useContext、createContextを利用することでReduxライクなFluxによるアプリケーション開発が可能になります。

今回は、タブを組むことを目指し、React HooksによるFluxの組み方を実践してみました。

DEMO

Action

アクションタイプ

TabActionTypes.ts


const TabActionTypes = {
  SELECT_TAB: 'SELECT_TAB',
  RESET_TABS: 'RESET_TABS'
};

export default TabActionTypes;

const TabActionTypes = {

SELECT_TAB: 'SELECT_TAB',

RESET_TABS: 'RESET_TABS'

};

export default TabActionTypes;

アクションの生成関数

TabActions.ts


import TabActionTypes from './TabActionTypes';

const TabActions = {
  selectTab(selectedIndex: number) {
    return {
      type: TabActionTypes.SELECT_TAB,
      payload: {
        selectedIndex: selectedIndex
      }
    }
  }
};

export default TabActions;

import TabActionTypes from './TabActionTypes';

const TabActions = {

selectTab(selectedIndex: number) {

return {

type: TabActionTypes.SELECT_TAB,

payload: {

selectedIndex: selectedIndex

}

};

export default TabActions;

Reducerの登録とContextの生成、呼び出し

Reducer関数

TabReducer.ts


import TabActionTypes from './TabActionTypes';
import { Action, TabState } from './Types'; // 型の呼び出し。別途定義

export const initialTabState: TabState = {
  selectedIndex: 0
}

export const TabReducer = (state: TabState, action: Action) => {
  switch (action.type) {
    case TabActionTypes.RESET_TABS: {
      return initialTabState;
    }
    case TabActionTypes.SELECT_TAB: {
      return {
        selectedIndex: action.payload.selectedIndex
      };
    }
    default: {
      return state;
    }
  }
}

import TabActionTypes from './TabActionTypes';

import { Action, TabState } from './Types'; // 型の呼び出し。別途定義

export const initialTabState: TabState = {

selectedIndex: 0

}

export const TabReducer = (state: TabState, action: Action) => {

switch (action.type) {

case TabActionTypes.RESET_TABS: {

return initialTabState;

}

case TabActionTypes.SELECT_TAB: {

return {

selectedIndex: action.payload.selectedIndex

};

}

default: {

return state;

}

トップ階層のコンポーネントでのuseReducerによるReducerの登録と、state, dispatchの生成

App.tsx


import React from 'react';
import { useReducer, useContext, createContext, Dispatch } from 'react';
import { TabState } from './Types';
import TabActions from './TabActions';
import { TabReducer, initialTabState } from './TabReducer';
import './App.scss';

// Contextの生成
const TabContext = createContext<TabState>(null as any);
const TabDispatchContext = createContext<Dispatch<any>>(null as any);

const App: React.FC = () => {
  
  // Reducerの登録と、state、dispatchの生成
  const [state, dispatch] = useReducer(TabReducer, initialTabState);

  // ViewのコンポーネントをContextのコンポーネントで囲み、stateとdispatchをそれぞれ別のContextに登録
  return (
    <TabContext.Provider value={state}>
      <TabDispatchContext.Provider value={dispatch}>
        <Tabs />
        <TabPanels />
      </TabDispatchContext.Provider>
    </TabContext.Provider>
  );
}
・・・

import React from 'react';

import { useReducer, useContext, createContext, Dispatch } from 'react';

import { TabState } from './Types';

import TabActions from './TabActions';

import { TabReducer, initialTabState } from './TabReducer';

import './App.scss';

// Contextの生成

const TabContext = createContext<TabState>(null as any);

const TabDispatchContext = createContext<Dispatch<any>>(null as any);

const App: React.FC = () => {

// Reducerの登録と、state、dispatchの生成

const [state, dispatch] = useReducer(TabReducer, initialTabState);

// ViewのコンポーネントをContextのコンポーネントで囲み、stateとdispatchをそれぞれ別のContextに登録

return (

<TabContext.Provider value={state}>

<TabDispatchContext.Provider value={dispatch}>

</TabDispatchContext.Provider>

</TabContext.Provider>

);

}

・・・

下層コンポーネントでのContextを通じた、state、dispatchの呼び出し

App.tsx


・・・
/**
 * Tabs
 */
function Tabs () {
  const state = useContext(TabContext); // stateを登録したContextを通してstateを呼び出し
  const dispatch = useContext(TabDispatchContext); // dispatchを登録したContextを通してdispatchを呼び出し
　　・・・
}
・・・

・・・

/**

* Tabs

function Tabs () {

const state = useContext(TabContext); // stateを登録したContextを通してstateを呼び出し

const dispatch = useContext(TabDispatchContext); // dispatchを登録したContextを通してdispatchを呼び出し

　　・・・

}

・・・

dispatchの実行とstateの更新

App.tsx


/**
 * Tabs
 */
function Tabs () {
  const state = useContext(TabContext);
  const dispatch = useContext(TabDispatchContext);

  // クリック時にアクションを生成して、dispatchを実行
  function onClick (selectedIndex: number) {
    dispatch(TabActions.selectTab(selectedIndex))
  }

  return (
    <ul
      className='tabs'>
      {
        tabItems.map((value, index) => {
          return (
            <li 
              key={index}
              aria-controls={'tabPanel_' + index}
              aria-selected={state.selectedIndex === index}
              role="tab"
              id={'tab_' + index}
              className='tabs__item'
              onClick={() => onClick(index)}>{value}</li>
          )
        })
      }
    </ul>
  );
}

/**

* Tabs

function Tabs () {

const state = useContext(TabContext);

const dispatch = useContext(TabDispatchContext);

// クリック時にアクションを生成して、dispatchを実行

function onClick (selectedIndex: number) {

dispatch(TabActions.selectTab(selectedIndex))

}

return (

<ul

className='tabs'>

{

tabItems.map((value, index) => {

return (

<li

key={index}

aria-controls={'tabPanel_' + index}

aria-selected={state.selectedIndex === index}

role="tab"

id={'tab_' + index}

className='tabs__item'

onClick={() => onClick(index)}>{value}</li>

)

})

}

</ul>

);

}

stateの反映のみが必要で、アクションの生成を行わないコンポーネントでは、stateのみ呼び出し

App.tsx


/**
 * Tab Panels
 */
function TabPanels () {
  const state = useContext(TabContext); // stateの呼び出し

  return (
    <div
      className='tabPanels'>
      {
        tabItems.map((value, index) => {
          return (
            <div
              key={index}
              role="tabpanel"
              aria-hidden={state.selectedIndex !== index}
              aria-labelledby={'tab_' + index}
              id={'tabPanel_' + index}
              className='tabPanels__item'>Tab Panel {index + 1}</div>
          )
        })
      }
    </div>
  );
}

/**

* Tab Panels

function TabPanels () {

const state = useContext(TabContext); // stateの呼び出し

return (

<div

className='tabPanels'>

{

tabItems.map((value, index) => {

return (

<div

key={index}

role="tabpanel"

aria-hidden={state.selectedIndex !== index}

aria-labelledby={'tab_' + index}

id={'tabPanel_' + index}

className='tabPanels__item'>Tab Panel {index + 1}</div>

)

})

}

</div>

);

}

実際にやってみた感想としては、しっかりとデータの設計をしておかないと組めないので、とてもプログラムを設計する勉強になりました。

今回はタブというシンプルなUIを例にしたので、ReactやFluxの恩恵は少ないですが、階層が深かったり複雑なデータを扱い様なUIを開発したり、チームでUIを組み合わせていくときに、この仕組はとても重宝するのではと感じました。

参考にさせていただいたサイト

Fluxとはなんなのか – Qiita

FluxによるReactアプリの状態管理 ReactHooks編 – Qiita

Replacing Redux with react hooks and context (part 1)

React & Flux入門 – Qiita

App.tsx 全文


import React from 'react';
import { useReducer, useContext, createContext, Dispatch } from 'react';
import { TabState } from './Types';
import TabActions from './TabActions';
import { TabReducer, initialTabState } from './TabReducer';
import './App.scss';

const TabContext = createContext<TabState>(null as any);
const TabDispatchContext = createContext<Dispatch<any>>(null as any);

const App: React.FC = () => {
  
  const [state, dispatch] = useReducer(TabReducer, initialTabState);

  return (
    <TabContext.Provider value={state}>
      <TabDispatchContext.Provider value={dispatch}>
        <Tabs />
        <TabPanels />
      </TabDispatchContext.Provider>
    </TabContext.Provider>
  );
}

const tabItems: string[] = [
  'Tab1', 'Tab2', 'Tab3'
]

/**
 * Tabs
 */
function Tabs () {
  const state = useContext(TabContext);
  const dispatch = useContext(TabDispatchContext);

  function onClick (selectedIndex: number) {
    dispatch(TabActions.selectTab(selectedIndex))
  }

  return (
    <ul
      className='tabs'>
      {
        tabItems.map((value, index) => {
          return (
            <li 
              key={index}
              aria-controls={'tabPanel_' + index}
              aria-selected={state.selectedIndex === index}
              role="tab"
              id={'tab_' + index}
              className='tabs__item'
              onClick={() => onClick(index)}>{value}</li>
          )
        })
      }
    </ul>
  );
}

/**
 * Tab Panels
 */
function TabPanels () {
  const state = useContext(TabContext);

  return (
    <div
      className='tabPanels'>
      {
        tabItems.map((value, index) => {
          return (
            <div
              key={index}
              role="tabpanel"
              aria-hidden={state.selectedIndex !== index}
              aria-labelledby={'tab_' + index}
              id={'tabPanel_' + index}
              className='tabPanels__item'>Tab Panel {index + 1}</div>
          )
        })
      }
    </div>
  );
}

export default App;

import React from 'react';

import { useReducer, useContext, createContext, Dispatch } from 'react';

import { TabState } from './Types';

import TabActions from './TabActions';

import { TabReducer, initialTabState } from './TabReducer';

import './App.scss';

const TabContext = createContext<TabState>(null as any);

const TabDispatchContext = createContext<Dispatch<any>>(null as any);

const App: React.FC = () => {

const [state, dispatch] = useReducer(TabReducer, initialTabState);

return (

<TabContext.Provider value={state}>

<TabDispatchContext.Provider value={dispatch}>

</TabDispatchContext.Provider>

</TabContext.Provider>

);

}

const tabItems: string[] = [

'Tab1', 'Tab2', 'Tab3'

]

/**

* Tabs

function Tabs () {

const state = useContext(TabContext);

const dispatch = useContext(TabDispatchContext);

function onClick (selectedIndex: number) {

dispatch(TabActions.selectTab(selectedIndex))

}

return (

<ul

className='tabs'>

{

tabItems.map((value, index) => {

return (

<li

key={index}

aria-controls={'tabPanel_' + index}

aria-selected={state.selectedIndex === index}

role="tab"

id={'tab_' + index}

className='tabs__item'

onClick={() => onClick(index)}>{value}</li>

)

})

}

</ul>

);

}

/**

* Tab Panels

function TabPanels () {

const state = useContext(TabContext);

return (

<div

className='tabPanels'>

{

tabItems.map((value, index) => {

return (

<div

key={index}

role="tabpanel"

aria-hidden={state.selectedIndex !== index}

aria-labelledby={'tab_' + index}

id={'tabPanel_' + index}

className='tabPanels__item'>Tab Panel {index + 1}</div>

)

})

}

</div>

);

}

export default App;

Types.ts


export type Action = {
  type: string;
  payload: any;
}

export type TabState = {
  selectedIndex: number;
}

export type Action = {

type: string;

payload: any;

}

export type TabState = {

selectedIndex: number;

}

index.tsx


import React from 'react';
import ReactDOM from 'react-dom';
import './index.scss';
import App from './App';
import * as serviceWorker from './serviceWorker';

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

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

import React from 'react';

import ReactDOM from 'react-dom';

import './index.scss';

import App from './App';

import * as serviceWorker from './serviceWorker';

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

// If you want your app to work offline and load faster, you can change

// unregister() to register() below. Note this comes with some pitfalls.

// Learn more about service workers: https://bit.ly/CRA-PWA

serviceWorker.unregister();

Author Profile

NINOMIYA

Webデザイナー兼コーダー出身のフロントエンド開発者です。 UXデザインやチーム開発の効率化など、勉強中です。

2024/05/02

SassのMixinを使って、単位、幅の値を自動的に計算

2024/04/19

Webアクセシビリティの義務化について調べてみました

2024/04/05

ZenStack を使用してデータベーススキーマを作成する

2024/03/15

認証が必要な Cloud Run サービスにアクセスする方法まとめ

Company

Our Solutions

Support

News

Blog

カテゴリーから探す

年別から見る

React HooksによるFluxでタブを作るまで

Action

アクションタイプ

アクションの生成関数

Reducerの登録とContextの生成、呼び出し

Reducer関数

トップ階層のコンポーネントでのuseReducerによるReducerの登録と、state, dispatchの生成

下層コンポーネントでのContextを通じた、state、dispatchの呼び出し

dispatchの実行とstateの更新

stateの反映のみが必要で、アクションの生成を行わないコンポーネントでは、stateのみ呼び出し

合わせて読みたい

2024/03/15

2024/03/01

2024/02/22

2024/02/02

2024/05/02

2024/04/19

2024/04/05

2024/03/15

2024/03/01

2024/02/22

2024/02/02

2024/05/02

2024/04/19

2024/04/05

2024/03/15

2024/03/01

2024/02/22

2024/02/02