diff --git a/components/molecules/PageHeader.tsx b/components/molecules/PageHeader.tsx index 3829a7c..9780e35 100644 --- 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 index 022cde6..6308ee7 100644 --- 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 index 663422d..c6497ea 100644 --- 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 index 8ea86f9..a237123 100644 --- 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 index 3d0d473..9935d5f 100644 --- 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 index c14ce18..01b5378 100644 --- 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 deleted file mode 100644 index c9a297a..0000000 --- a/store/actions/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from "./CounterAction" -export * from "./PageAction" diff --git a/store/actions/CounterAction.ts b/store/counter/actions.ts similarity index 89% rename from store/actions/CounterAction.ts rename to store/counter/actions.ts index 4e1813f..1a04b2a 100644 --- a/store/actions/CounterAction.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("calculate"), } diff --git a/store/counter/index.ts b/store/counter/index.ts new file mode 100644 index 0000000..237eb2a --- /dev/null +++ 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 new file mode 100644 index 0000000..804569c --- /dev/null +++ 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 => { + return produce(state, (draft: ICounterState) => { + draft.count = state.count + 1 + }) + } + ) + .case( + CounterActions.decrement, + (state: Readonly): ICounterState => { + return produce(state, (draft: ICounterState) => { + draft.count = state.count - 1 + }) + } + ) + .case( + CounterActions.calculate, + ( + state: Readonly, + 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 new file mode 100644 index 0000000..f10059e --- /dev/null +++ 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 new file mode 100644 index 0000000..26003d0 --- /dev/null +++ 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/actions/PageAction.ts b/store/page/actions.ts similarity index 100% rename from store/actions/PageAction.ts rename to store/page/actions.ts diff --git a/store/page/index.ts b/store/page/index.ts new file mode 100644 index 0000000..237eb2a --- /dev/null +++ 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 new file mode 100644 index 0000000..4f786ae --- /dev/null +++ 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, + payload: Readonly + ): IPageState => { + return produce(state, (draft: IPageState) => { + draft.selectedPage = payload.selectedPage + }) + } +) diff --git a/store/page/selectors.ts b/store/page/selectors.ts new file mode 100644 index 0000000..4e1bf39 --- /dev/null +++ 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 new file mode 100644 index 0000000..30a9235 --- /dev/null +++ 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 index e1c3722..f87596e 100644 --- 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({ diff --git a/store/reducers/CounterReducer.ts b/store/reducers/CounterReducer.ts deleted file mode 100644 index 2ff7e6f..0000000 --- a/store/reducers/CounterReducer.ts +++ /dev/null @@ -1,31 +0,0 @@ -import produce from "immer" -import { reducerWithInitialState } from "typescript-fsa-reducers" -import { CounterActions, ICounterPayload } from "../actions" -import { CounterInitialState, ICounterState } from "../states" - -export const countReducers = reducerWithInitialState(CounterInitialState) - .case( - CounterActions.increment, - (state: ICounterState, _: ICounterPayload) => { - return produce(state, draft => { - draft.count = state.count + 1 - }) - } - ) - .case( - CounterActions.decrement, - (state: ICounterState, _: ICounterPayload) => { - return produce(state, draft => { - draft.count = state.count - 1 - }) - } - ) - .case( - CounterActions.calculate, - (state: ICounterState, payload: ICounterPayload) => { - const { inputNumber } = payload - return produce(state, draft => { - draft.count = state.count + inputNumber - }) - } - ) diff --git a/store/reducers/PageReducer.ts b/store/reducers/PageReducer.ts deleted file mode 100644 index 01d8690..0000000 --- a/store/reducers/PageReducer.ts +++ /dev/null @@ -1,13 +0,0 @@ -import produce from "immer" -import { reducerWithInitialState } from "typescript-fsa-reducers" -import { IPagePayload, PageActions } from "../actions" -import { IPageState, PageInitialState } from "../states" - -export const pageReducers = reducerWithInitialState(PageInitialState).case( - PageActions.changePage, - (state: IPageState, payload: IPagePayload) => { - return produce(state, draft => { - draft.selectedPage = payload.selectedPage - }) - } -) diff --git a/store/reducers/index.ts b/store/reducers/index.ts deleted file mode 100644 index 7dd68b4..0000000 --- a/store/reducers/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from "./CounterReducer" -export * from "./PageReducer" diff --git a/store/states.ts b/store/states.ts index a20c749..054bae3 100644 --- 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 + page: Readonly } /** * Initial state tree */ export const InitialState: IInitialState = { - /** - * Root counter state - */ counter: CounterInitialState, - /** - * Root page state - */ page: PageInitialState, }