Merge pull request #8 from treetips/feature/change_store_directory_structure

treetips · web-flow · commit 3823c42414c5 · 2019-06-24T19:39:23.000+09:00
Change directory structure from redux-way to re-ducks
diff --git a/components/molecules/PageHeader.tsx b/components/molecules/PageHeader.tsx
@@ -2,7 +2,7 @@ import { Paper, Typography } from "@material-ui/core"
 import { createStyles, makeStyles, Theme } from "@material-ui/core/styles"
 import React from "react"
 import { useSelector } from "react-redux"
-import { IInitialState } from "../../store/states"
+import { selectedPageSelector } from "../../store/page"
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -26,8 +26,6 @@ const useStyles = makeStyles((theme: Theme) =>
 
 interface IProps {}
 
-const selectedPageSelector = (state: IInitialState) => state.page.selectedPage
-
 /**
  * Page header component
  * @param props IProps
diff --git a/components/organisms/ResponsiveDrawer.tsx b/components/organisms/ResponsiveDrawer.tsx
@@ -4,7 +4,7 @@ import { createStyles, makeStyles, Theme } from "@material-ui/core/styles"
 import MenuIcon from "@material-ui/icons/Menu"
 import React, { useState } from "react"
 import { useSelector } from "react-redux"
-import { IInitialState } from "../../store/states"
+import { selectedPageSelector } from "../../store/page"
 import { Sidenavi } from "../organisms"
 
 const drawerWidth = 290
@@ -51,8 +51,6 @@ interface IProps {
   children: React.ReactNode
 }
 
-const selectedPageSelector = (state: IInitialState) => state.page.selectedPage
-
 /**
  * Responsive drawer
  * @see https://material-ui.com/demos/drawers/#responsive-drawer
diff --git a/components/organisms/Sidenavi.tsx b/components/organisms/Sidenavi.tsx
@@ -3,8 +3,7 @@ import { createStyles, makeStyles, Theme } from "@material-ui/core/styles"
 import SvgIcon from "@material-ui/core/SvgIcon"
 import { useDispatch, useSelector } from "react-redux"
 import { Page, SiteInfo } from "../../constants"
-import { PageActions } from "../../store/actions"
-import { IInitialState } from "../../store/states"
+import { PageActions, selectedPageSelector } from "../../store/page"
 import { NextListItem } from "../molecules"
 
 const useStyles = makeStyles((theme: Theme) =>
@@ -47,8 +46,6 @@ const useStyles = makeStyles((theme: Theme) =>
 
 interface IProps {}
 
-const selectedPageSelector = (state: IInitialState) => state.page.selectedPage
-
 /**
  * Side navigation component
  * @param props IProps
diff --git a/components/templates/Layout.tsx b/components/templates/Layout.tsx
@@ -2,7 +2,7 @@ import { createStyles, makeStyles, Theme } from "@material-ui/core/styles"
 import Head from "next/head"
 import * as React from "react"
 import { useSelector } from "react-redux"
-import { IInitialState } from "../../store/states"
+import { selectedPageSelector } from "../../store/page"
 import { ResponsiveDrawer } from "../organisms"
 
 const useStyles = makeStyles((theme: Theme) =>
@@ -17,8 +17,6 @@ interface IProps {
   children: React.ReactNode
 }
 
-const selectedPageSelector = (state: IInitialState) => state.page.selectedPage
-
 export const Layout = function(props: IProps) {
   const { children } = props
   const classes = useStyles(props)
diff --git a/pages/about.tsx b/pages/about.tsx
@@ -5,7 +5,7 @@ import { SpacingPaper } from "../components/atoms"
 import { HeaderArticleContainer } from "../components/organisms"
 import { Layout } from "../components/templates"
 import { Page } from "../constants"
-import { IPagePayload, PageActions } from "../store/actions"
+import { IPagePayload, PageActions } from "../store/page"
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
diff --git a/pages/redux.tsx b/pages/redux.tsx
@@ -12,8 +12,8 @@ import { SpacingPaper } from "../components/atoms"
 import { HeaderArticleContainer } from "../components/organisms"
 import { Layout } from "../components/templates"
 import { Page } from "../constants"
-import { CounterActions, IPagePayload, PageActions } from "../store/actions"
-import { IInitialState } from "../store/states"
+import { CounterActions, countSelector } from "../store/counter"
+import { IPagePayload, PageActions } from "../store/page"
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -29,8 +29,6 @@ const useStyles = makeStyles((theme: Theme) =>
   })
 )
 
-const countSelector = (state: IInitialState) => state.counter.count
-
 function Redux() {
   const classes = useStyles({})
   const dispatch = useDispatch()
diff --git a/store/actions/index.ts b/store/actions/index.ts
diff --git a/store/counter/actions.ts b/store/counter/actions.ts
@@ -7,9 +7,7 @@ export interface ICounterPayload {
 }
 
 export const CounterActions = {
-  // no arguments
   increment: actionCreator("increment"),
   decrement: actionCreator("decrement"),
-  // with arguments
   calculate: actionCreator<ICounterPayload>("calculate"),
 }
diff --git a/store/counter/index.ts b/store/counter/index.ts
@@ -0,0 +1,3 @@
+export * from "./actions"
+export * from "./selectors"
+export * from "./states"
diff --git a/store/counter/reducers.ts b/store/counter/reducers.ts
@@ -0,0 +1,38 @@
+import produce from "immer"
+import { reducerWithInitialState } from "typescript-fsa-reducers"
+import {
+  CounterActions,
+  CounterInitialState,
+  ICounterPayload,
+  ICounterState,
+} from "."
+
+export default reducerWithInitialState(CounterInitialState)
+  .case(
+    CounterActions.increment,
+    (state: Readonly<ICounterState>): ICounterState => {
+      return produce(state, (draft: ICounterState) => {
+        draft.count = state.count + 1
+      })
+    }
+  )
+  .case(
+    CounterActions.decrement,
+    (state: Readonly<ICounterState>): ICounterState => {
+      return produce(state, (draft: ICounterState) => {
+        draft.count = state.count - 1
+      })
+    }
+  )
+  .case(
+    CounterActions.calculate,
+    (
+      state: Readonly<ICounterState>,
+      payload: ICounterPayload
+    ): ICounterState => {
+      const { inputNumber } = payload
+      return produce(state, (draft: ICounterState) => {
+        draft.count = state.count + inputNumber
+      })
+    }
+  )
diff --git a/store/counter/selectors.ts b/store/counter/selectors.ts
@@ -0,0 +1,3 @@
+import { IInitialState } from "../states"
+
+export const countSelector = (state: IInitialState) => state.counter.count
diff --git a/store/counter/states.ts b/store/counter/states.ts
@@ -0,0 +1,9 @@
+/**
+ * Counter
+ */
+export interface ICounterState {
+  count: number
+}
+export const CounterInitialState: ICounterState = {
+  count: 1,
+}
diff --git a/store/page/actions.ts b/store/page/actions.ts
diff --git a/store/page/index.ts b/store/page/index.ts
@@ -0,0 +1,3 @@
+export * from "./actions"
+export * from "./selectors"
+export * from "./states"
diff --git a/store/page/reducers.ts b/store/page/reducers.ts
@@ -0,0 +1,15 @@
+import produce from "immer"
+import { reducerWithInitialState } from "typescript-fsa-reducers"
+import { IPagePayload, IPageState, PageActions, PageInitialState } from "."
+
+export default reducerWithInitialState(PageInitialState).case(
+  PageActions.changePage,
+  (
+    state: Readonly<IPageState>,
+    payload: Readonly<IPagePayload>
+  ): IPageState => {
+    return produce(state, (draft: IPageState) => {
+      draft.selectedPage = payload.selectedPage
+    })
+  }
+)
diff --git a/store/page/selectors.ts b/store/page/selectors.ts
@@ -0,0 +1,4 @@
+import { IInitialState } from "../states"
+
+export const selectedPageSelector = (state: IInitialState) =>
+  state.page.selectedPage
diff --git a/store/page/states.ts b/store/page/states.ts
@@ -0,0 +1,11 @@
+import { Page } from "../../constants"
+
+/**
+ * Page
+ */
+export interface IPageState {
+  selectedPage: Page
+}
+export const PageInitialState: IPageState = {
+  selectedPage: Page.TOP,
+}
diff --git a/store/reducers.ts b/store/reducers.ts
@@ -1,6 +1,6 @@
 import { combineReducers } from "redux"
-import { countReducers } from "./reducers/CounterReducer"
-import { pageReducers } from "./reducers/PageReducer"
+import countReducers from "./counter/reducers"
+import pageReducers from "./page/reducers"
 import { IInitialState } from "./states"
 
 export const combinedReducers = combineReducers<IInitialState>({
diff --git a/store/reducers/CounterReducer.ts b/store/reducers/CounterReducer.ts
diff --git a/store/reducers/PageReducer.ts b/store/reducers/PageReducer.ts
diff --git a/store/reducers/index.ts b/store/reducers/index.ts
diff --git a/store/states.ts b/store/states.ts
@@ -1,49 +1,18 @@
-import { Page } from "../constants"
-
-/**
- * Counter
- */
-export interface ICounterState {
-  count: number
-}
-export const CounterInitialState: ICounterState = {
-  count: 1,
-}
-
-/**
- * Page
- */
-export interface IPageState {
-  selectedPage: Page
-}
-export const PageInitialState: IPageState = {
-  selectedPage: Page.TOP,
-}
+import { CounterInitialState, ICounterState } from "./counter"
+import { IPageState, PageInitialState } from "./page"
 
 /**
  * Initial state tree interface
  */
 export interface IInitialState {
-  /**
-   * Root counter state
-   */
-  counter: ICounterState
-  /**
-   * Root page state
-   */
-  page: IPageState
+  counter: Readonly<ICounterState>
+  page: Readonly<IPageState>
 }
 
 /**
  * Initial state tree
  */
 export const InitialState: IInitialState = {
-  /**
-   * Root counter state
-   */
   counter: CounterInitialState,
-  /**
-   * Root page state
-   */
   page: PageInitialState,
 }

Original file line number	Diff line number	Diff line change
`@@ -7,9 +7,7 @@ export interface ICounterPayload {`
`7`	`7`	`}`
`8`	`8`
`9`	`9`	`export const CounterActions = {`
`10`		`- // no arguments`
`11`	`10`	`increment: actionCreator("increment"),`
`12`	`11`	`decrement: actionCreator("decrement"),`
`13`		`- // with arguments`
`14`	`12`	`calculate: actionCreator<ICounterPayload>("calculate"),`
`15`	`13`	`}`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+export * from "./actions"`
	`2`	`+export * from "./selectors"`
	`3`	`+export * from "./states"`