【React.js】第三回 Reactでアプリ開発！ 〜APIを使用した実践的なアプリを開発するぜ編〜【Redux × TypeScript × Stylus】

src
├── dist
│   └── index.html
├── styl
│   └── index.styl
└── ts
    ├── actions
    │   ├── ActionTypes.tsx
    │   ├── ArticleList.tsx
    │   └── Categories.tsx
    ├── components
    │   ├── ArticleList.tsx
    │   └── Categories.tsx
    ├── reducers
    │   ├── ArticleList.tsx
    │   └── Categories.tsx
    ├── types
    │   └── types.d.tsx
    ├── App.tsx
    └── index.tsx

body
  background-color #333333
  color white
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
  margin 0px

/** ヘッダー */
.app-bar
  background-color #222222
  top 0px
  height 80px
  border 1px solid #666666
.title
  color #FFFF33
  font-size 34px
  font-weight bold
  padding 3px 12px
  line-height 80px

/** カテゴリー */
.category
  position absolute
  top 80px
  display flex
  justify-content flex-start
  height 35px
  font-size 16px
  margin-top 12px
  margin-left 8px
  line-height 30px
  &-border
    color lightgray
    font-weight lighter
  &-item
    height 34px
    margin auto 1px
    background-color #222222
    color #CCCCFF
    text-align center
    padding 3px 16px 0px 16px
    border 1px solid #666666
    border-bottom 1px solid #666666
    border-radius 5px 5px 0px 0px
    z-index 1
    &:disabled
      background-color #333333
      border-bottom none
    &:hover
      background-color #333333

/** 記事一覧 */
.article
  &-area
    position absolute
    top 126px
    width 100%
    border-top 1px solid #666666
    display flex
    flex-wrap wrap
    justify-content flex-start
  &-count
    width 100%
    margin-top 15px
    margin-left 15px
  &-card
    display flex
    flex-flow column
    align-items center
    background-color white
    color black
    width 300px
    height 320px
    margin 12px
    border-radius 5px
    cursor pointer
    &-image
      object-fit cover
      width 280px
      height 170px
      margin-top 10px
    &-title
      font-size 14px
      font-weight bold
      overflow hidden
      width 280px
      height 65px
      margin-top 8px
    &-category
      display flex
      flex-wrap wrap
      align-items center
      width 280px
      height 28px
      margin-top 8px
      overflow hidden
      &-item
        background-color #333333
        color white
        font-size 8px
        padding 6px 10px
        border-radius 12px
        margin 0px 6px 3px 0px
    &-date
      font-size 12px
      width 280px
      text-align right
      margin-top 8px

/** ローディング */
.load-msg
  margin 12px
  font-size 25px

/** エラー */
.err-msg
  margin 12px
  font-size 20px
  color hotpink

/** Props型定義 */
declare namespace PropsType {
    type ArticleList ={
        categorySlug: string,
    }
}

/** State型定義 */
declare namespace StateType {
    // ArticleList
    type PostCategory = {
        id: number,
        name: string,
    };
    type Post = {
        id: number,
        title: string,
        url: string,
        image: string,
        categories: PostCategory[],
        date: string,
    };
    type ArticleListState = {
        posts: Post[],
        posts_display_count: number,
        posts_all_count: number,
        error: boolean,
    };
    // Categories
    type Category = {
        id: number,
        name: string,
        slug: string,
        is_selected: boolean,
    };
    type CategoriesState = {
        categories: Category[],
        error: boolean,
    };
    // 共通
    type ReducerState = {
        articleListState: ArticleListState,
        categoriesState: CategoriesState,
    }
}

/** JSON型定義 */
declare namespace JsonType {
    // ArticleList
    type PostCategory = {
        [k: string]: {
            ID: number,
            name: string,
        }
    };
    type Post = {
        ID: number,
        title: string,
        URL: string,
        terms: {
            category: PostCategory[],
        },
        featured_image: string,
        date: string,
    };
    type PostsResponse = {
        found: number,
        posts: Post[],
    };
    // Categories
    type Category = {
        ID: number,
        name: string,
        slug: string,
        parent: number,
    };
    type CategoriesResponse = {
        categories: Category[],
    };
}

// package.jsonの作成
npm init -y

// TypeScript関連のパッケージをインストール
npm install --save-dev typescript ts-loader

// React関連のパッケージをインストール
npm install --save react react-dom react-router-dom
npm install --save-dev @types/react @types/react-dom @types/react-router-dom

// webpack関連のパッケージをインストール
npm install --save-dev webpack webpack-cli webpack-dev-server

// Redux関連もインストール
npm install --save redux react-redux redux-logger redux-thunk
npm install --save-dev @types/redux @types/react-redux @types/redux-logger @types/redux-thunk

// Stylus関連のパッケージをインストール
npm install --save-dev stylus stylus-loader css-loader mini-css-extract-plugin

const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
    // 開発用モードで出力
    mode: "development",
    // メインとなるファイル
    entry: './src/ts/index.tsx',
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/,
            },
            {
                test: /\.styl?$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'stylus-loader'
                ],
            },
        ],
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js'],
    },
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
    },
    devServer: {
        open: true,
        contentBase: path.join(__dirname, 'dist'),
        watchContentBase: true,
        port: 8080,
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: "style.css",
        })
    ],
};

src
├── dist
│   └── index.html
├── styl
│   └── index.styl
└── ts
    ├── actions
    │   ├── ActionTypes.tsx
    │   ├── ArticleList.tsx
    │   └── Categories.tsx
    ├── components
    │   ├── ArticleList.tsx
    │   └── Categories.tsx
    ├── reducers
    │   ├── ArticleList.tsx
    │   └── Categories.tsx
    ├── types
    │   ├── ArticleList.tsx
    │   └── types.d.tsx
    ├── App.tsx
    └── index.tsx

<!doctype html>
<html>
<head>
    <link rel="stylesheet" href="style.css">
    <title>都会のエレキベア</title>
</head>
<body>
<div id="root"></div>
<script src="./bundle.js"></script>
</body>
</html>

import React from 'react';
import ReactDOM from "react-dom";
import {createStore, combineReducers, applyMiddleware} from "redux";
import {Provider} from "react-redux";
import {BrowserRouter} from "react-router-dom";
import {logger} from "redux-logger";
import thunk from "redux-thunk";
import App from "./App";
import articleListReducer from "./reducers/ArticleList";
import categoriesReducer from "./reducers/Categories";

// 全てのReducerを定義
let reducers = combineReducers({
    articleListState: articleListReducer,
    categoriesState: categoriesReducer
});

const store = createStore(
    reducers,
    applyMiddleware(logger, thunk)
);

ReactDOM.render(
    <Provider store={store}>
        <BrowserRouter>
            <App />
        </BrowserRouter>
    </Provider>,
    document.getElementById('root')
);

import React from "react";
import {Switch, Route, Redirect} from "react-router-dom";
import ArticleList from "./components/ArticleList";
import Categories from "./components/Categories";
import '../styl/index.styl';

export default function App() {
    return (
        <div>
            <div className="app-bar">
                <div className="title">都会のエレキベア</div>
            </div>
            <Categories />
            <Switch>
                <Route exact path="/" render={() => <ArticleList categorySlug={""}/>} />
                <Route exact path="/category/" render={() => <Redirect to="/" />} />
                <Route exact path="/category/:slug"
                       render={({match: match}) => <ArticleList categorySlug={match.params.slug}/>} />
            </Switch>
        </div>
    );
}

import React, {useEffect} from "react";
import {useDispatch, useSelector} from "react-redux";
import '../../styl/index.styl';
import {fetchPostData} from "../actions/ArticleList";

function ArticleList(props: PropsType.ArticleList) {
    const dispatch = useDispatch();
    const state = useSelector((state: StateType.ReducerState) => state.articleListState);

    // レンダリング時に記事データを取得する
    useEffect(() => {
        dispatch(fetchPostData(props.categorySlug));
    }, [props.categorySlug]);

    if (state.error) {
        // エラー発生時
        return (
            <div className="article-area">
                <div className="err-msg">読込中にエラーが発生しました。</div>
            </div>
        );

    } else if (state.posts == null || Object.keys(state.posts).length == 0) {
        // 記事データロード中
        return (
            <div className="article-area">
                <div className="load-msg">Now Loading...</div>
            </div>
        );

    } else {
        // 記事データ取得後の表示
        return (
            <div className="article-area">
                <div className="article-count">検索結果 {state.posts_all_count} 件のうち {state.posts_display_count} 件を表示しています。</div>
                {
                    state.posts.map((post: StateType.Post) => {
                        return (
                            <div key={post.id} className="article-card" onClick={() => window.open(post.url)}>
                                <img className="article-card-image" src={post.image} />
                                <div className="article-card-title">{post.title}</div>
                                <div className="article-card-category">
                                    {
                                        post.categories.map((category: StateType.PostCategory) => {
                                            return <span key={category.id} className="article-card-category-item">{category.name}</span>;
                                        })
                                    }
                                </div>
                                <div className="article-card-date">{post.date.slice(0, 10)}</div>
                            </div>
                        );
                    })
                }
            </div>
        );
    }
}
export default ArticleList;

import React, {useEffect} from "react";
import {useDispatch, useSelector} from "react-redux";
import {useHistory} from "react-router-dom";
import '../../styl/index.styl';
import {fetchCategoryData, selectCategoryId} from "../actions/Categories";

function Categories() {
    const dispatch = useDispatch();
    const categories = useSelector((state: StateType.ReducerState) => state.categoriesState.categories);
    const history = useHistory();

    // レンダリング時にカテゴリーデータを取得する
    useEffect(() => {
        dispatch(fetchCategoryData());
    }, []);

    // 押下されたカテゴリーページに遷移する
    const pushCategoryPage = (selectCategory: StateType.Category): void => {
        dispatch(selectCategoryId(selectCategory.id));
        history.push(`/category/${selectCategory.slug}`)
    };

    // カテゴリーの表示
    return (
        <div className="category">
            {
                categories.map((category: StateType.Category) => {
                    return (
                        <React.Fragment key={category.id}>
                            <button type="button" className="category-item"
                                    disabled={category.is_selected}
                                    onClick={() => pushCategoryPage(category)}>{category.name}</button>
                        </React.Fragment>
                    );
                })
            }
        </div>
    );
}
export default Categories;

/* ActionTypes定義 */
export = {
    // ArticleList
    START_POSTS_REQUEST: "START_POSTS_REQUEST",
    RECEIVE_POSTS_DATA: "RECEIVE_POSTS_DATA",
    // Categories
    START_CATEGORY_REQUEST: "START_CATEGORY_REQUEST",
    RECEIVE_CATEGORY_DATA: "RECEIVE_CATEGORY_DATA",
    SELECT_CATEGORY: "SELECT_CATEGORY",
} as const;

import {Action, Dispatch} from "redux";
import ActionTypes from "./ActionTypes";

// 記事データ取得URL
const POSTS_API_URL: string = 'https://public-api.wordpress.com/rest/v1.1/sites/elekibear.com/posts';

/**
 * リクエスト開始Action
 */
const startRequest = () => ({
    type: ActionTypes.START_POSTS_REQUEST,
    payload: {},
});

/**
 * データ受信完了Action
 */
const receiveData = (error: any, json: JsonType.PostsResponse | null) => ({
    type: ActionTypes.RECEIVE_POSTS_DATA,
    payload: { error, json },
});

/**
 * JSONデータ取得処理
 * @param url 取得対象のURL
 */
const fetchPostsJson = (url: string) => {
    return fetch(url)
        .then((response: Response) => {
            return response.json();
        })
        .catch((e: any) => {
            throw e;
        });
}

/**
 * 記事データを取得処理
 * @param categorySlug カテゴリースラッグ
 */
export function fetchPostData(categorySlug: string) {
    return async (dispatch: Dispatch<Action>) => {
        // リクエスト開始
        dispatch(startRequest());
        try {
            // URLからJSONを取得
            let url: string = POSTS_API_URL;
            // カテゴリースラッグをリクエストパラメータに追加
            if (categorySlug) {
                url += "?category=" + categorySlug;
            }
            const json: JsonType.PostsResponse = await fetchPostsJson(url);
            // データ受信完了
            dispatch(receiveData(null, json));
        } catch (e) {
            // エラー発生時
            dispatch(receiveData(e, null));
        }
    };
}

// ActionをUnionTypeで定義
export type ArticleListActions =
    ReturnType<typeof startRequest> |
    ReturnType<typeof receiveData>;

import {Action, Dispatch} from "redux";
import ActionTypes from "./ActionTypes";

// カテゴリー取得URL
const CATEGORY_API_URL: string = "https://public-api.wordpress.com/rest/v1.1/sites/elekibear.com/categories";

/**
 * リクエスト開始Action
 */
const startRequest = () => ({
    type: ActionTypes.START_CATEGORY_REQUEST,
    payload: {},
});

/**
 * データ受信完了Action
 */
const receiveData = (error: any, json: JsonType.CategoriesResponse | null) => ({
    type: ActionTypes.RECEIVE_CATEGORY_DATA,
    payload: { error, json },
});

/**
 * JSONデータ取得処理
 * @param url 取得対象のURL
 */
const fetchCategoryJson = (url: string) => {
    return fetch(url)
        .then((response: Response) => {
            return response.json();
        })
        .catch((e: any) => {
            throw e;
        });
}

/**
 * カテゴリー情報取得処理
 */
export function fetchCategoryData() {
    return async (dispatch: Dispatch<Action>) => {
        // リクエスト開始
        dispatch(startRequest());
        try {
            // URLからJSONを取得
            const json: JsonType.CategoriesResponse = await fetchCategoryJson(CATEGORY_API_URL);
            // データ受信完了
            dispatch(receiveData(null, json));
        } catch (e) {
            // エラー発生時
            dispatch(receiveData(e, null));
        }
    };
}

/**
 * カテゴリー選択処理
 * @param selectCategoryId 選択したカテゴリーID
 */
export function selectCategoryId(selectCategoryId: number) {
    return {
        type: ActionTypes.SELECT_CATEGORY,
        payload: {selectCategoryId},
    };
}

// ActionをUnionTypeで定義
export type CategoriesActions =
    ReturnType<typeof startRequest> |
    ReturnType<typeof receiveData> |
    ReturnType<typeof selectCategoryId>;

import {ArticleListActions} from "../actions/ArticleList";
import ActionTypes from "../actions/ActionTypes";

const initialState: StateType.ArticleListState = {
    posts: [],
    posts_display_count: 0,
    posts_all_count: 0,
    error: false,
}

/**
 * 記事データ取得処理
 * @param json 取得したJSONデータ
 */
const getPostsInfo = (json: JsonType.PostsResponse | null): StateType.ArticleListState => {
    // State定義
    const state: StateType.ArticleListState = {
        posts: [],
        posts_display_count: 0,
        posts_all_count: 0,
        error: false,
    };

    // JSONデータがNULLの場合、処理終了
    if (json == null) return state;

    // JSONデータからStateに変換して格納
    const postsData: JsonType.Post[] = json.posts;
    for (let i = 0; i < json.posts.length; i++) {
        // 記事データを取り出す
        const post: JsonType.Post = postsData[i];
        const categories = Object.entries(post.terms.category).map(([name, category]: [string, any]) => {
            return {
                id: category.ID,
                name: name,
            }
        });
        // 記事データを格納
        state.posts.push({
            id: post.ID,
            title: post.title,
            url: post.URL,
            image: post.featured_image,
            categories: categories,
            date: post.date,
        });
    }
    // 記事件数を設定
    state.posts_all_count = json.found;
    state.posts_display_count = state.posts.length;
    return state;
}

export default function articleListReducer(state: StateType.ArticleListState = initialState,
                                           action: ArticleListActions): StateType.ArticleListState {
    switch (action.type) {
        // リクエスト開始時に値を初期化
        case ActionTypes.START_POSTS_REQUEST:
            return {
                posts: [],
                posts_display_count: 0,
                posts_all_count: 0,
                error: false,
            };
        // データ受信時にPostデータを設定
        case ActionTypes.RECEIVE_POSTS_DATA:
            return action.payload.error
                ? {...state, error: true}
                : getPostsInfo(action.payload.json);
        default:
            return state;
    }
}

import {CategoriesActions} from "../actions/Categories";
import ActionTypes from "../actions/ActionTypes";

const initialState: StateType.CategoriesState = {
    categories: [
        {
            id: 0,
            name: "ALL",
            slug: "",
            is_selected: true,
        },
    ],
    error: false,
}

/**
 * カテゴリー取得処理
 * @param json 取得したJSONデータ
 */
const getCategories = (json: JsonType.CategoriesResponse | null): StateType.Category[] => {
    // State定義
    const categories: StateType.Category[] = initialState.categories;

    // JSONデータがNULLの場合、処理終了
    if (json == null) return categories;

    // JSONデータからStateに変換
    const categoriesData: JsonType.Category[] = json.categories;
    for (let i = 0; i < categoriesData.length; i++) {
        const category: JsonType.Category = categoriesData[i];
        // 親カテゴリーのみ取り出す（ID1は未分類のため省く）
        if (category.parent == 0 && category.ID != 1) {
            categories.push({
                id: category.ID,
                name: category.name,
                slug: category.slug,
                is_selected: false,
            });
        }
    }
    // ID昇順でソート
    categories.sort(function(a, b) {
        if (a.id > b.id) {
            return 1;
        } else {
            return -1;
        }
    })
    return categories;
}

/**
 * カテゴリー選択処理
 * @param categories stateのカテゴリー情報
 * @param selectCategoryId 選択されたカテゴリーID
 */
const selectCategory = (categories: StateType.Category[], selectCategoryId: number): StateType.Category[] => {
    // Stateのカテゴリーをコピー
    let changeCategories: StateType.Category[] = [...categories];
    // 選択状態を更新して返却
    changeCategories.map((category: StateType.Category) => {
        category.is_selected = category.id == selectCategoryId;
    })
    return changeCategories;
}

export default function categoriesReducer(state: StateType.CategoriesState = initialState,
                                          action: CategoriesActions): StateType.CategoriesState {
    switch (action.type) {
        // リクエスト開始時に値を初期化
        case ActionTypes.START_CATEGORY_REQUEST:
            return {
                categories: [
                    {
                        id: 0,
                        name: "ALL",
                        slug: "",
                        is_selected: true,
                    },
                ],
                error: false,
            };
        // データ受信時にCategoryデータを設定
        case ActionTypes.RECEIVE_CATEGORY_DATA:
            return action.payload.error
                ? {...state, error: true}
                : {...state, categories: getCategories(action.payload.json)};
        // カテゴリー選択時
        case ActionTypes.SELECT_CATEGORY:
            return {
                ... state,
                categories: selectCategory(state.categories, action.payload.selectCategoryId),
                error: false,
            }
        default:
            return state;
    }
}

import React from 'react';
import ReactDOM from "react-dom";
import {createStore, combineReducers, applyMiddleware} from "redux";
import {Provider} from "react-redux";
import {BrowserRouter} from "react-router-dom";
import {logger} from "redux-logger";
import thunk from "redux-thunk";
import App from "./App";
import articleListReducer from "./reducers/ArticleList";
import categoriesReducer from "./reducers/Categories";

// 全てのReducerを定義
let reducers = combineReducers({
    articleListState: articleListReducer,
    categoriesState: categoriesReducer
});

const store = createStore(
    reducers,
    applyMiddleware(logger, thunk)
);

ReactDOM.render(
    <Provider store={store}>
        <BrowserRouter>
            <App />
        </BrowserRouter>
    </Provider>,
    document.getElementById('root')
);

import React from 'react';
import ReactDOM from "react-dom";
import {createStore, combineReducers, applyMiddleware} from "redux";
import {Provider} from "react-redux";
import {BrowserRouter} from "react-router-dom";
import {logger} from "redux-logger";
import thunk from "redux-thunk";
import App from "./App";
import articleListReducer from "./reducers/ArticleList";
import categoriesReducer from "./reducers/Categories";

// 全てのReducerを定義
let reducers = combineReducers({
    articleListState: articleListReducer,
    categoriesState: categoriesReducer
});

const store = createStore(
    reducers,
    applyMiddleware(logger, thunk)
);

ReactDOM.render(
    <Provider store={store}>
        <BrowserRouter>
            <App />
        </BrowserRouter>
    </Provider>,
    document.getElementById('root')
);

import React from "react";
import {Switch, Route, Redirect} from "react-router-dom";
import ArticleList from "./components/ArticleList";
import Categories from "./components/Categories";
import '../styl/index.styl';

export default function App() {
    return (
        <div>
            <div className="app-bar">
                <div className="title">都会のエレキベア</div>
            </div>
            <Categories />
            <Switch>
                <Route exact path="/" render={() => <ArticleList categorySlug={""}/>} />
                <Route exact path="/category/" render={() => <Redirect to="/" />} />
                <Route exact path="/category/:slug"
                       render={({match: match}) => <ArticleList categorySlug={match.params.slug}/>} />
            </Switch>
        </div>
    );
}

import React, {useEffect} from "react";
import {useDispatch, useSelector} from "react-redux";
import {useHistory} from "react-router-dom";
import '../../styl/index.styl';
import {fetchCategoryData, selectCategoryId} from "../actions/Categories";

function Categories() {
    const dispatch = useDispatch();
    const categories = useSelector((state: StateType.ReducerState) => state.categoriesState.categories);
    const history = useHistory();

    // レンダリング時にカテゴリーデータを取得する
    useEffect(() => {
        dispatch(fetchCategoryData());
    }, []);

    // 押下されたカテゴリーページに遷移する
    const pushCategoryPage = (selectCategory: StateType.Category): void => {
        dispatch(selectCategoryId(selectCategory.id));
        history.push(`/category/${selectCategory.slug}`)
    };

    // カテゴリーの表示
    return (
        <div className="category">
            {
                categories.map((category: StateType.Category) => {
                    return (
                        <React.Fragment key={category.id}>
                            <button type="button" className="category-item"
                                    disabled={category.is_selected}
                                    onClick={() => pushCategoryPage(category)}>{category.name}</button>
                        </React.Fragment>
                    );
                })
            }
        </div>
    );
}
export default Categories;

import React, {useEffect} from "react";
import {useDispatch, useSelector} from "react-redux";
import '../../styl/index.styl';
import {fetchPostData} from "../actions/ArticleList";

function ArticleList(props: PropsType.ArticleList) {
    const dispatch = useDispatch();
    const state = useSelector((state: StateType.ReducerState) => state.articleListState);

    // レンダリング時に記事データを取得する
    useEffect(() => {
        dispatch(fetchPostData(props.categorySlug));
    }, [props.categorySlug]);

    if (state.error) {
        // エラー発生時
        return (
            <div className="article-area">
                <div className="err-msg">読込中にエラーが発生しました。</div>
            </div>
        );

    } else if (state.posts == null || Object.keys(state.posts).length == 0) {
        // 記事データロード中
        return (
            <div className="article-area">
                <div className="load-msg">Now Loading...</div>
            </div>
        );

    } else {
        // 記事データ取得後の表示
        return (
            <div className="article-area">
                <div className="article-count">検索結果 {state.posts_all_count} 件のうち {state.posts_display_count} 件を表示しています。</div>
                {
                    state.posts.map((post: StateType.Post) => {
                        return (
                            <div key={post.id} className="article-card" onClick={() => window.open(post.url)}>
                                <img className="article-card-image" src={post.image} />
                                <div className="article-card-title">{post.title}</div>
                                <div className="article-card-category">
                                    {
                                        post.categories.map((category: StateType.PostCategory) => {
                                            return <span key={category.id} className="article-card-category-item">{category.name}</span>;
                                        })
                                    }
                                </div>
                                <div className="article-card-date">{post.date.slice(0, 10)}</div>
                            </div>
                        );
                    })
                }
            </div>
        );
    }
}
export default ArticleList;

import {Action, Dispatch} from "redux";
import ActionTypes from "./ActionTypes";

// 記事データ取得URL
const POSTS_API_URL: string = 'https://public-api.wordpress.com/rest/v1.1/sites/elekibear.com/posts';

/**
 * リクエスト開始Action
 */
const startRequest = () => ({
    type: ActionTypes.START_POSTS_REQUEST,
    payload: {},
});

/**
 * データ受信完了Action
 */
const receiveData = (error: any, json: JsonType.PostsResponse | null) => ({
    type: ActionTypes.RECEIVE_POSTS_DATA,
    payload: { error, json },
});

/**
 * JSONデータ取得処理
 * @param url 取得対象のURL
 */
const fetchPostsJson = (url: string) => {
    return fetch(url)
        .then((response: Response) => {
            return response.json();
        })
        .catch((e: any) => {
            throw e;
        });
}

/**
 * 記事データを取得処理
 * @param categorySlug カテゴリースラッグ
 */
export function fetchPostData(categorySlug: string) {
    return async (dispatch: Dispatch<Action>) => {
        // リクエスト開始
        dispatch(startRequest());
        try {
            // URLからJSONを取得
            let url: string = POSTS_API_URL;
            // カテゴリースラッグをリクエストパラメータに追加
            if (categorySlug) {
                url += "?category=" + categorySlug;
            }
            const json: JsonType.PostsResponse = await fetchPostsJson(url);
            // データ受信完了
            dispatch(receiveData(null, json));
        } catch (e) {
            // エラー発生時
            dispatch(receiveData(e, null));
        }
    };
}

// ActionをUnionTypeで定義
export type ArticleListActions =
    ReturnType<typeof startRequest> |
    ReturnType<typeof receiveData>;

import {ArticleListActions} from "../actions/ArticleList";
import ActionTypes from "../actions/ActionTypes";

const initialState: StateType.ArticleListState = {
    posts: [],
    posts_display_count: 0,
    posts_all_count: 0,
    error: false,
}

/**
 * 記事データ取得処理
 * @param json 取得したJSONデータ
 */
const getPostsInfo = (json: JsonType.PostsResponse | null): StateType.ArticleListState => {
    // State定義
    const state: StateType.ArticleListState = {
        posts: [],
        posts_display_count: 0,
        posts_all_count: 0,
        error: false,
    };

    // JSONデータがNULLの場合、処理終了
    if (json == null) return state;

    // JSONデータからStateに変換して格納
    const postsData: JsonType.Post[] = json.posts;
    for (let i = 0; i < json.posts.length; i++) {
        // 記事データを取り出す
        const post: JsonType.Post = postsData[i];
        const categories = Object.entries(post.terms.category).map(([name, category]: [string, any]) => {
            return {
                id: category.ID,
                name: name,
            }
        });
        // 記事データを格納
        state.posts.push({
            id: post.ID,
            title: post.title,
            url: post.URL,
            image: post.featured_image,
            categories: categories,
            date: post.date,
        });
    }
    // 記事件数を設定
    state.posts_all_count = json.found;
    state.posts_display_count = state.posts.length;
    return state;
}

export default function articleListReducer(state: StateType.ArticleListState = initialState,
                                           action: ArticleListActions): StateType.ArticleListState {
    switch (action.type) {
        // リクエスト開始時に値を初期化
        case ActionTypes.START_POSTS_REQUEST:
            return {
                posts: [],
                posts_display_count: 0,
                posts_all_count: 0,
                error: false,
            };
        // データ受信時にPostデータを設定
        case ActionTypes.RECEIVE_POSTS_DATA:
            return action.payload.error
                ? {...state, error: true}
                : getPostsInfo(action.payload.json);
        default:
            return state;
    }
}