Redux state showing undefined data inserted in stateStore using axios - reactjs

Question

Here is my code related to reducers and actions but I do not see my storeState getting data. It adds new item in stateStore but that is undefined. My actions/index file is as following
import axios from 'axios';
const API_KEY = 'f41c2a072e2fab2d1319257e842d3b4b';
const ROOT_URL = `https://api.openweathermap.org/data/2.5/forecast?appid=${API_KEY}`;
export const FETCH_WEATHER = 'FETCH_WEATHER';
export function fetchWeather(city){
const url = `${ROOT_URL}&q=${city},pk`;
const request = axios.get(url);
return {
type: FETCH_WEATHER,
payload: request
};
}
My weather_reducer.js is as follows
import { FETCH_WEATHER } from '../actions/index';
export default function(state=[], action){
switch (action.type) {
case FETCH_WEATHER:{
return [action.payload.data, ...state]; //ES6 Spread Operator [newCity,all_old_elms_from_state]
}
default:
return state;
}
}
my reducers/index.js is as follows:-
import { combineReducers } from 'redux';
import WeatherReducer from './reducer_weather';
const rootReducer = combineReducers({
weather: WeatherReducer
});
export default rootReducer;
My index.js file is as following
import React from 'react';
import ReactDOM from 'react-dom';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import rootReducer from './reducers/index';
import './index.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import App from './components/App';
const store = createStore(rootReducer);
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root'));
and Lastly my contianers/SearchBar.js is as follows
import React, {Component} from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { fetchWeather } from '../actions/index';
class SearchBar extends Component{
constructor(props){
super(props);
this.state = {term:''}; //Local state of component ======== Not Redux(Global APP) state
this.onInputChange = this.onInputChange.bind(this); //Bind this (components context to your function
this.onFromSubmit = this.onFromSubmit.bind(this);
}
onInputChange(event) {
this.setState({ term:event.target.value });
}
onFromSubmit(event){
event.preventDefault();
//Go fetch weather data based on term
this.props.fetchWeather(this.state.term);
this.setState({ term:'' });
}
render(){
return(
<div className="col-sm-12">
<form onSubmit={this.onFromSubmit}>
<div className="input-group mb-3">
<input
className="form-control"
placeholder="Get five-day forecast for your favorite cities.."
value={this.state.term}
onChange={this.onInputChange}
/>
<div className="input-group-append">
<button className="btn btn-outline-secondary" type="submit">Submit</button>
</div>
</div>
</form>
</div>
);
}
}
function mapDispatchToProps(dispatch){
return bindActionCreators({ fetchWeather },dispatch);
}
export default connect(null,mapDispatchToProps)(SearchBar);

Answer 1

Thank you for the support, I figured it out, actually I was missing the middleware parameter in my index.js. As in applyMiddleWare we have to pass the middleware name.
import React from 'react';
import ReactDOM from 'react-dom';
import { createStore, applyMiddleware } from 'redux';
import ReduxPromise from 'redux-promise';
import { Provider } from 'react-redux';
import rootReducer from './reducers/index';
import './index.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import App from './components/App';
const storeWithMiddleWare = applyMiddleware(ReduxPromise)(createStore);
ReactDOM.render(
<Provider store={storeWithMiddleWare(rootReducer)}>
<App />
</Provider>,
document.getElementById('root'));