リファクタリング : componentsとcontainersの階層化 (STEP 3 : 他のユーザのタスクが見れるタスク管理アプリを作成する - React + Redux + Firebase チュートリアル)

★前回の記事

yucatio.hatenablog.com

componentのファイルが多くなり、管理しづらくなってきたので、画面パーツごとにディレクトリを分けます。

現在のディレクトリ構成と変更後のディレクトリ構成です。

f:id:yucatio:20181029142629p:plain

階層の移動と構成

以下に、src/components以下のファイルの移動先を示します。

ファイル名 移動先
App.js App.js (変更なし)
NoMatch.js NoMatch.js (変更なし)
Dashboard.js dashboard/index.js
RecentUpdatedTodos.js dashboard/recentUpdatedTodos/index.js
UserUpdatedTodo.js dashboard/recentUpdatedTodos/UserUpdatedTodo.js
Login.js login/index.js
Navbar.js navbar/index.js
Footer.js todos/Footer.js
Link.js todos/Link.js
NoticeForTodo.js todos/Notice.js
Todo.js todos/Todo.js
TodoList.js todos/TodoList.js
TodoComponent.js todos/index.js

同様にsrc/containersも移動します。

ファイル名 移動先
AddTodo.js todos/AddTodo.js
FilterLink.js todos/FilterLink.js
VisibleTodoList.js todos/VisibleTodoList.js

ソースコードの修正

階層を変更したので、ソースコード中のパスも書き換えます。

src/components/App.js

import Login from './login/'
import Navbar from './navbar/'
import Dashboard from './dashboard/'
import TodoComponent from './todos/'

src/components/dashboard/index.js

import RecentUpdatedTodos from './recentUpdatedTodos/'

src/components/login/index.js

import { loginWithGoogle, logout } from '../../actions/authActions'

src/components/todos/Footer.js

import FilterLink from '../../containers/todos/FilterLink'
import { VisibilityFilters } from '../../actions/visibilityFilterActions'

src/components/todos/index.js

// 前略
import { locationChangeOnTodos } from '../../actions/todoActions'
import Footer from './Footer'
import Notice from './Notice'
import AddTodo from '../../containers/todos/AddTodo'
import VisibleTodoList from '../../containers/todos/VisibleTodoList'

class TodoComponent extends React.Component {
  // 中略
  render() {
    // 中略
    return (
      <div>
        {isOwnTodos && <AddTodo uid={uid} />}
        <Notice />  {/* 変更 */}
        <VisibleTodoList uid={uid} isOwnTodos={isOwnTodos} />
        <Footer />
      </div>
    )
  }
}

src/containers/todos/AddTodo.js

import { addTodo } from '../../actions/todoActions'

src/containers/todos/FilterLink.js

import { setVisibilityFilter } from '../../actions/visibilityFilterActions'
import Link from '../../components/todos/Link'

src/containers/todos/VisibleTodoList.js

import { toggleTodo } from '../../actions/todoActions'
import TodoList from '../../components/todos/TodoList'

以上でcomponentsとcontainersの階層化ができました。1つのディレクトリのファイル数が10を超えたらディレクトリ分割を検討するとよいです。

★次回の記事

yucatio.hatenablog.com

★目次

yucatio.hatenablog.com