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'));