Action Not reaching Reducer in React redux - reactjs

Question

I have a snippet of code that I want to use to call an api, but before show a loading screen. For some reason in my code below I cannot seem to get the action REQUEST_GAMES to hit my combined gameReducer. I have included all the code below. Any reason as to why the action type is not being picked up by the reducer? I am not sure what i am doing wrong. Have i not connected it to my component correctly? The redux logger is showing that action is being called.
AddGame.js (component)
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
})

Answer 1

The REQUEST_GAME action is probably processed by the reducer. After requestGame(), fetchGames() is called immediately. fetchGames() changes the state back to false. And both these actions happen in the same function block. So, there is no chance for the prop changes to cause a component re-render.