Redux : Reducer is not called - reactjs

Question

I am making a mobile app by React Native and Redux.
It seems that my actions, state are working properly because I did console.log them.
The issue here is that my reducer is not called.
I did log it on the console but there is no result.
I don't know what is causing this.
I try to fetch API data in Market.js
I'd really appreciated if anyone helps me.
my github repo : https://github.com/sj602/invescoin
code as following:
App.js
import React, { Component } from 'react';
import { Provider } from 'react-redux';
import { Stacks } from './utils/Navigation';
import {
StyleSheet, Text, View,
} from 'react-native';
import { store } from './store';
export default class App extends Component {
render() {
return (
<Provider store={store}>
<Stacks />
</Provider>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
store.js
import {
createStore,
applyMiddleware,
compose
} from 'redux';
import promise from 'redux-promise';
import thunk from 'redux-thunk';
import logger from 'redux-logger';
import reducer from '../reducers';
// const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
export const store = createStore(
reducer,
// composeEnhancers(
applyMiddleware(thunk)
// )
);
reducer.js
import { combineReducers } from 'redux';
import {
GET_MARKET_CAP,
GET_MARKET_CAP_SUCCESS,
GET_MARKET_CAP_FAIL,
GET_GLOBAL_INFO,
} from '../actions';
const initialState = {
isFetching: null,
data: '',
hasError: false,
errorMessage: null,
}
export default function reducer(state = initialState, action) {
switch (action.type) {
case GET_MARKET_CAP:
console.log(2)
return ;
case GET_MARKET_CAP_SUCCESS:
console.log('success')
case GET_MARKET_CAP_FAIL:
return {
...state,
marketCap: action.err
}
case GET_GLOBAL_INFO:
console.log('action')
return {
...state,
bitcoinPercentage: action.bitcoinPercentage
}
default:
return state;
}
}
actions.js
import {
GET_MARKET_CAP,
GET_MARKET_CAP_SUCCESS,
GET_MARKET_CAP_FAIL,
GET_GLOBAL_INFO
} from './types.js';
import * as api from '../utils/api';
export const getMarketCap = (coin, currency) => dispatch => {
return api.getMarketCap(coin, currency)
.then(data => {
dispatch({type: GET_MARKET_CAP_SUCCESS, data})
})
.catch(err => {
dispatch({type: GET_MARKET_CAP_FAIL, err})
})
}
export function getGlobalInfo() {
return dispatch => {
return api.getGlobalInfo().then(data => {
dispatch({type: GET_GLOBAL_INFO, data})
})
}
}
types.js
export const GET_MARKET_CAP = 'GET_MARKET_CAP';
export const GET_MARKET_CAP_SUCCESS = 'GET_MARKET_CAP_SUCCESS';
export const GET_MARKET_CAP_FAIL = 'GET_MARKET_CAP_FAIL';
export const GET_GLOBAL_INFO = 'GET_GLOBAL_INFO';
export const GET_COIN_PRICE = 'GET_COIN_PRICE';
Market.js
import React, { Component } from 'react';
import {
View, Text, TouchableOpacity,
ScrollView, TextInput
} from 'react-native';
import { connect } from 'react-redux';
import {
getMarketCap,
getGlobalInfo,
} from '../actions/index';
import * as api from '../utils/api';
import { cryptoList } from '../utils/cryptoList';
class Market extends Component {
componentDidMount() {
this.props.getMarketCap('bitcoin', 'KRW').then(data => data[0]['market_cap_krw'])
;
this.props.getGlobalInfo();
}
render() {
return (
<View>
<Text>
{this.props.market}
</Text>
<Text>
{this.props.bitcoinPercentage}
</Text>
</View>
)
}
}
const mapStateToProps = (state) => {
return {
market: state.market,
bitcoinPercentage: state.bitcoinPercentage
}
}
export default connect(mapStateToProps, {
getMarketCap,
getGlobalInfo
})(Market)
api.js
const Coinmarketcap_URL = `https://api.coinmarketcap.com/v1/`;
const headers = {
'Accept': 'application/json',
'Content-Type': 'application/json',
'Authentication': 'c23R30cm2jOOExyAsG6pf5Xxy4QwpndxaIMRs6aOZxIQoUlMVOv1tCQZL3jZz'
};
export const getMarketCap = (coin, currency) => {
return fetch(
`${Coinmarketcap_URL}ticker/${coin}/?convert=${currency}`,
{
method: 'GET',
headers,
}
)
.then(res => res.json())
.catch(e => console.log('Error occurred : ', e))
}
export const getGlobalInfo = () => {
return fetch(
`${Coinmarketcap_URL}global/`,
{
method: 'GET',
headers,
}
)
.then(res => res.json())
.catch(e => console.log('Error occurred : ', e))
}

Answer 1

I think the issue is in reducer.js L7:
import { combineReducers } from 'redux';
import {
GET_MARKET_CAP,
GET_MARKET_CAP_SUCCESS,
GET_MARKET_CAP_FAIL,
GET_GLOBAL_INFO,
} from '../actions'; // <--- ../actions/index.js doesn't export these.
When you import from ../actions, the exports are expected to be in the index.js file that is in that folder. The filenames you used to describe your issue don't match the actual filenames in your repository.
Instead, try import { ... } from ../actions/types since types.js is the file that actually exports those consts.
Hope that helps!

Answer 2

I think the problem is in market.js file
import { bindActionCreators } from "redux"
function mapDispatchToProps(dipatch) {
return bindActionCreators({
getMarketCap,
getGlobalInfo
}, dispatch)
}
export default connect(mapStateToProps,mapDispatchToProps)(Market)
Now it should work , you missed binding your function with dispatch

Answer 3

Sorry, but I couldn't help but notice that is your store.js there is no initial state for the reducers. In the react docs for the create store method:
createStore(reducer, [preloadedState], [enhancer])
Can you make an initial State and see if that works. So your code might look similar to this;
import {
createStore,
applyMiddleware,
compose
} from 'redux';
import promise from 'redux-promise';
import thunk from 'redux-thunk';
import logger from 'redux-logger';
import reducer from '../reducers';
initialState = {Initial State of Reducers}
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
export const store = createStore(
reducer,
intialState,
composeEnhancers(
applyMiddleware(thunk)
)
);