我尝试使用Giphy API,redux和axios制作搜索应用,但我认为我在API请求的某个地方出错,无法从API获取所有搜索结果。
我使用一个动作来创建一个API请求,该动作由一个reducer捕获,但是当我在reducer中控制action.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'));
答案 0 :(得分:1)
我认为您的问题是您没有发送行动
this.dispatch(this.loadGiphs(0, 3));