Change directory structure from redux-way to re-ducks

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

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

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

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)

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({

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()

store/actions/CounterAction.ts → 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"),
 }

store/counter/index.ts

@@ -0,0 +1,3 @@
+export * from "./actions"
+export * from "./selectors"
+export * from "./states"

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
+      })
+    }
+  )

store/counter/selectors.ts

@@ -0,0 +1,3 @@
+import { IInitialState } from "../states"
+
+export const countSelector = (state: IInitialState) => state.counter.count

store/counter/states.ts

@@ -0,0 +1,9 @@
+/**
+ * Counter
+ */
+export interface ICounterState {
+  count: number
+}
+export const CounterInitialState: ICounterState = {
+  count: 1,
+}

store/page/index.ts

@@ -0,0 +1,3 @@
+export * from "./actions"
+export * from "./selectors"
+export * from "./states"

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
+    })
+  }
+)

store/page/selectors.ts

@@ -0,0 +1,4 @@
+import { IInitialState } from "../states"
+
+export const selectedPageSelector = (state: IInitialState) =>
+  state.page.selectedPage

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,
+}

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>({

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,
 }