Redux-axios middleware in React Native is not working - reactjs

Question

React native app
Store(states and backend) is built with axios and redux through redux-axios middleware which requires suffixes _SUCCESS and _FAIL for the Request.
Trying to make API call with redux axios middleware. However, data is not passing to the component. Reducer is executing only Default case for some reason.
action:
import { Actions } from "../../../constants/actions";
export const getNewsBloomberg = () => {
return {
type: Actions.GET_NEWS_BLOOMBERG,
payload: {
client: "newsClient",
request: {
url: "top-headlines?sources=bloomberg",
},
},
};
};
Reducer:
import { Actions } from "../../../constants/actions";
const initialState = {
data: [],
latestUpdate: null,
loading: null,
error: false,
};
export const bloomberg = (state = initialState, action) => {
switch (action.type) {
case Actions.GET_NEWS_BLOOMBERG:
return { ...state, latestUpdate: null, loading: true, error: false };
case Actions.GET_NEWS_BLOOMBERG_SUCCESS:
const data_string = JSON.stringify(action.payload.data);
const data_parsed = JSON.parse(data_string);
const data = data_parsed.articles;
return {
...state,
latestUpdate: new Date(),
loading: false,
data: list,
};
case Actions.GET_NEWS_BLOOMBERG_FAIL:
return {
...state,
latestUpdate: null,
loading: false,
error: "No results found.",
};
default:
return { ...state };
}
};
index.js in Store:
import axios from "axios";
import { multiClientMiddleware } from "redux-axios-middleware";
import storage from "redux-persist/lib/storage";
import { createStore, applyMiddleware } from "redux";
import { persistStore, persistReducer } from "redux-persist";
import reducers from "./reducers";
//import { API_KEY } from "react-native-dotenv";
const persistConfig = {
key: "root",
storage,
whitelist: ["favorites"],
};
const clients = {
stockClient: {
client: axios.create({
baseURL: "https://sandbox.iexapis.com",
responseType: "json",
params: {
token: "Tpk_27c",
},
}),
},
newsClient: {
client: axios.create({
baseURL: "https://newsapi.org/v2",
responseType: "json",
params: {
apiKey: "c7c",
},
}),
},
};
const persistedReducer = persistReducer(persistConfig, reducers);
const store = createStore(
persistedReducer,
// applyMiddleware(client),
applyMiddleware(multiClientMiddleware(clients))
);
const persistor = persistStore(store);
export default { store, persistor };
Reducers are combined and Provider is wrapped to the application in App.js
The component:
import React, { Component } from "react";
import { FlatList, RefreshControl } from "react-native";
import { Content, Text, View } from "native-base";
import NewsItem from "./NewsItem";
import { connect } from "react-redux";
import { getNewsBloomberg } from "../../store/actions/news";
class NewsBloomberg extends Component {
onRefresh = () => this.props.getNewsBloomberg; //merge it
refreshControl = (loading) => (
<RefreshControl
onRefresh={this.onRefresh}
refreshing={loading}
/>
);
render() {
const { data, latestUpdate, loading } = this.props.bloomberg;
return (
<View refreshControl={this.refreshControl(loading)} style={{ flex: 1 }}>
{console.log(loading)}
<FlatList
data={data}
keyExtractor={(key) => key.source.id}
renderItem={({ item, index }) => (
<NewsItem onPress={() => console.log("Pressed")} data={data} />
)}
/>
</View>
);
}
}
const mapStateToProps = (state) => {
console.log(state.bloomberg);
return { bloomberg: state.bloomberg };
};
const mapDispatchToProps = {
getNewsBloomberg,
};
export default connect(mapStateToProps, mapDispatchToProps)(NewsBloomberg);
**I noticed that reducer throws the DEFAULT case only **
Does it mean that action is not dispatching or what?

Answer 1

You're not calling the action creator getNewsBloomberg inside onRefresh.
onRefresh = () => this.props.getNewsBloomberg();

Answer 2

Your mapDispatchToProps is wrong, what mapDispatchToProps does is it gives you dispatch as a first argument by using the higher order component "connect" and by using that you can dispatch your actions in react components,
now what you are doing is you are simply calling actions and not dispatching it,
const mapDispatchToProps = (dispatch) => {
getNewsBloomberg:()=>{dispatch(getNewsBloomberg())},
};
here i am taking dispatch as first argument and invoking the action inside dispatch