我有一段代码,我想用来调用api,但在显示加载屏幕之前。出于某些原因,在我的代码中,我似乎无法通过REQUEST_GAMES操作来击中我的组合gameReducer。我已经包含了下面的所有代码。是什么原因导致减速器没有拾取动作类型?我不确定我做错了什么。我没有正确连接到我的组件吗? redux记录器显示正在调用操作。
AddGame.js(组件)
import React, { Component } from 'react';
import { connect } from 'react-redux';
import * as actions from '../actions';
import { getIsFetching, getVisibleGames } from '../reducers'
class AddGame extends Component{
constructor(props){
super(props);
this.state = {term: ''}
this.onInputChange = this.onInputChange.bind(this)
this.onFormSubmit = this.onFormSubmit.bind(this)
}
onInputChange(event){
this.setState({term:event.target.value})
}
onFormSubmit(event){
const { requestGames, fetchGames } = this.props;
event.preventDefault();
// we need to go fetch weather data
requestGames();
fetchGames(this.state.term);
this.setState({term:'' })
}
renderContent(){
const { isFetching , games} = this.props
if (isFetching && !games.length){
return <p>Loading</p>
} else if (games){
return <div>{games.map(this.getGame)}</div>
}
}
styleCSS = {
padding:'20px'
};
getGame(data){
return(
<div>
<pre key={data.id}>{data.name}</pre>
<img src ={data.cover.url} alt = "" />
</div>
)
}
render(){
return(
<div style={this.styleCSS}>
<form onSubmit={this.onFormSubmit}>
<input
value={this.state.term}
onChange={this.onInputChange}/>
<button type="submit">
Search
</button>
{this.renderContent()}
</form>
</div>
);
}
}
const mapStateToProps = (state) => {
return {
isFetching :getIsFetching(state),
games:getVisibleGames(state),
}
}
export default connect(mapStateToProps,actions)(AddGame);
index.js(reducer)
import { combineReducers } from 'redux';
import authReducers from './authReducer';
import { reducer as formReducer } from 'redux-form';
import gameReducer, * as fromGames from './gameReducer';
const allReducers= combineReducers({
auth: authReducers,
form: formReducer,
game: gameReducer
});
export default allReducers;
export const getIsFetching = (state) => fromGames.getIsFetching(state.game);
export const getVisibleGames = (state)=> fromGames.getGames(state.game)
gameReducer.js
import { REQUEST_GAME, FETCH_GAME } from '../actions/types';
import { combineReducers } from 'redux';
const gameReducer = () => {
const games = (state=[], action) => {
console.log(action);
switch(action.type){
case FETCH_GAME:
return action.payload || false;
default:
return state;
}
};
const isFetching = (state = false, action) => {
switch (action.type) {
case REQUEST_GAME:
return true;
case FETCH_GAME:
return false;
default:
return state;
}
};
return combineReducers({
games,
isFetching
});
};
export default gameReducer;
export const getIsFetching = state => state.isFetching
;
export const getGames = state => state.games;
actions.js
import axios from 'axios';
import { FETCH_USER, REGISTER_USER, FETCH_GAME, REQUEST_GAME } from './types';
export const fetchUser = ()=> async dispatch=>{
const res = await axios.get('/api/current_user');
dispatch({type:FETCH_USER, payload:res.data});
console.log('fetchuser:',res.data)
};
export const fetchGames = (search)=> async dispatch=>{
const proxy = 'https://still-eyrie-36200.herokuapp.com/'
const res = await axios.get(`${proxy}https://api-2445582011268.apicast.io/games/?search=${search}&fields=name,category,genres,game_modes,cover,first_release_date,summary`,{
headers: {
'user-key':'18430b84d6bfaab720b08eeda8f2810d',
'Accept':'application/json',
'Content-Type':'application/json',
}
})
dispatch({type:FETCH_GAME, payload:res.data});
console.log('gamedata:',res.data)
};
export const requestGames = () =>({
type: REQUEST_GAME
})
REQUEST_GAME
动作可能由减速器处理。在requestGame()之后,立即调用fetchGames()。 fetchGames()将状态更改为false。这两个动作都发生在同一个功能块中。因此,prop更改不可能导致组件重新渲染。