# GiphyAPI を叩くメソッドの作成と Redux-thunk を使った非同期処理

## - GiphyAPI を叩くメソッドの作成

<https://codesandbox.io/s/k30no82zo5>

### dependencies の追加

Axios を dependencies に追加する

### APIs/giphyAPI.js

```javascript
import axios from "axios";

const giphyApi = word => {
  const search = word;
  const key = "V6AU97qCSCYVmbIC5UDppEiVM1xnuO9E";
  const limit = 3;
  const url = `https://api.giphy.com/v1/gifs/search?q=${search}&api_key=${key}&limit=${limit}`;

  // promise オブジェクトが return されるようにする
  return axios.get(url);
};

export default giphyApi;
```

### index.js

作ったメソッドを仮に実行する

```javascript
// 仮に実行する
import giphyAPI from "./APIs/giphyAPI";

giphyAPI("cat").then(res => {
  console.log(res.data);
});
```

## - redux-thunk を適用する

<https://codesandbox.io/s/9zx8nrnzjr>

### index.js

```javascript
// applyMiddleware を新たに読み込む
import { createStore, applyMiddleware } from "redux";
// redux-thunk も読み込む
import thunk from "redux-thunk";

// middleWare 用の配列を作成する
const middleWares = [thunk];

// store に適用する
const store = createStore(rootReducer, applyMiddleware(...middleWares));
```

## - action を作る

<https://codesandbox.io/s/64rq4lyj23>

### actions/getUrls.js

```javascript
import giphyAPI from "../APIs/giphyAPI";

// 通常の action creator
const receiveData = data => {
  return {
    type: "RECEIVE_DATA",
    payload: data
  };
};

// thunk 用の関数を返す action creator
const getUrls = word => {
  return dispatch => {
    giphyAPI(word).then(res => {
      const data = res.data.data;
      const imageUrlList = data.map(item => item.images.downsized.url);
      dispatch(receiveData(imageUrlList));
    });
  };
};

export default getUrls;
```

### reducers/imageUrls.js

reducer の修正

```javascript
const initialState = [1, 2, 3, 4, 5];

const imageUrls = (state = initialState, action) => {
  switch (action.type) {
    // action.payload に data が乗ってくる
    case "RECEIVE_DATA":
      return action.payload;

    default:
      return state;
  }
};

export default imageUrls;
```

### index.js

仮に実行する。

```javascript
// 仮に実行
import getUrls from "./actions/getUrls";
store.dispatch(getUrls("cat"));
```

## - Search コンポーネントにメソッドを connect する

<https://codesandbox.io/s/0or0zq8pvn>

### containers/Search.js

```javascript
import Search from "../components/Search";
import { connect } from "react-redux";

// action を読み込む
import getUrls from "../actions/getUrls";

// action を dhispatch するメソッドを props として渡す
const mapDispatchToProps = dispatch => {
  return {
    getUrls: word => {
      dispatch(getUrls(word));
    }
  };
};

export default connect(null, mapDispatchToProps)(Search);
```

### components/Search.js

```javascript
handleSubmit = event => {
    // connect で与えられたメソッドを受け取る
    const { getUrls } = this.props;
    event.preventDefault();
    // 使用する
    getUrls(this.state.title);
    this.setState({ title: "" });
  };
```

### App.js

```javascript
import React from "react";

import ImageList from "./containers/ImageList";

// components から containers へ変更
import Search from "./containers/Search";

const App = () => {
  return (
    <div>
      App
      <Search />
      <ImageList />
    </div>
  );
};

export default App;
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://super-yusuke.gitbook.io/udemy-course/react-redux-redux-woita-giphy-app/giphyapi-wokumesoddonoto-redux-thunk-wotta.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.