0

Giphy API、redux、axios を使用して検索アプリを作成しようとしていますが、API からすべての検索結果を取得する API リクエストのどこかが間違っていると思います。

アクションを使用して API リクエストを行い、それがレデューサーによってキャッチされますが、レデューサー内のアクションの値を console.log にすると、実際のオブジェクトではなく [object Object] が取得されます。どうしてこれなの?

ReduxPromise をミドルウェアとして使用しています。

アクションコードでの私のAPIリクエストは次のとおりです。

import axios from 'axios';

export const FETCH_GIPHS = 'FETCH_GIPHS'

export function fetchGiphs(value) {
    const api = "http://api.giphy.com/v1/gifs/search";
    const API_KEY = 'hdUk5buTTISSC29bx2DAXfDRCz6tkcrS';

    const url = `${api}?q=${value}&api_key=${API_KEY}&limit=5"`;

    //http://api.giphy.com/v1/gifs/search?q=rainbow&api_key=hdUk5buTTISSC29bx2DAXfDRCz6tkcrS&limit=5"

    const request = axios.get(url);
    console.log('Request:', request)

    return {
        type: FETCH_GIPHS,
        payload: request
    }
}

そしてレデューサー:

export default function(state = null, action) {
    console.log('action recieved: ' + action)
return state;
} 

私のミドルウェアがあるメインのindex.js

const createStoreWithMiddleware = applyMiddleware(ReduxPromise)(createStore);

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

1 に答える 1