You could find documentation here.
To install it you should write this:
npm install --save redux-promise
So, we have initial middleware in src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import App from './components/app';
import reducers from './reducers';
const createStoreWithMiddleware = applyMiddleware()(createStore);
ReactDOM.render(
<Provider store={createStoreWithMiddleware(reducers)}>
<App />
</Provider>
, document.querySelector('.container'));
To start working with redux-promise middleware, we should import it:
...
import ReduxPromise from 'redux-promise'
...
And now we are going to hook it into our application:
...
import reducers from './reducers';
const createStoreWithMiddleware = applyMiddleware(ReduxPromise)(createStore);
ReactDOM.render(
...
After that, let's go to the src/actions/index.js and create a specific action:
export const FETCH_WEATHER = 'FETCH_WEATHER';
export function fetchWeather() {
return{
type: FETCH_WEATHER
}
}
Now let's add url, that we'll use during AJAX requests:
const API_KEY = 'KEEP_IT_SECRET';
const ROOT_URL = `http://samples.openweathermap.org/data/2.5/forecast?appid=${API_KEY}`;
export const FETCH_WEATHER = 'FETCH_WEATHER';
...
And now, let's redisign our function to accept data and change url:
...
export function fetchWeather(city) {
const url = `${ROOT_URL}&q=${city},ru`;
return{
type: FETCH_WEATHER
};
}
It's time to make an actual request, and we'll use axios for that. Let's install it:
npm install --save axios
And here we impot it and create a request:
import axios from 'axios'
...
export function fetchWeather(city) {
const url = `${ROOT_URL}&q=${city},ru`;
const request = axios.get(url);
return{
type: FETCH_WEATHER,
payload: request
};
}
It's time to return to our src/containers/search_bar.js
import React, {Component} from 'react';
export default class SearchBar extends Component {
constructor(props) {
super(props);
this.state = {term: ''};
this.onInputChange = this.onInputChange.bind(this);
}
onInputChange(event) {
this.setState({term: event.target.value});
}
onFormSubmit(event) {
event.preventDefault();
}
render() {
return (
<form onSubmit={this.onFormSubmit} className="input-group">
<input
placeholder="Get a five-day forecast in your favourite cities."
className="form-control"
value={this.state.term}
onChange={this.onInputChange}/>
<span className="input-group-btn">
<button type="submit" className="btn btn-secondary">Submit</button>
</span>
</form>
);
};
}
Let's import everything we'll need to use react-redux:
//src/containers/search_bar.js
import React, {Component} from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux'
...
And let's import our action:
//src/containers/search_bar.js
...
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux'
import {fetchWeather} from "../actions/index"
...
Remove export of the class
//src/containers/search_bar.js
...
class SearchBar extends Component {...}
And let's add function, that will bind redux and this container:
// src/containers/search_bar.js
...
function mapDispatchToProps(dispatch) {
return bindActionCreators({fetchWeather}, dispatch)
}
export default connect(null, mapDispatchToProps)(SearchBar)
And now, let's write a code in a function, that hanldes the form submit, and this code will pass data to our action.
// src/containers/search_bar.js
...
onFormSubmit(event) {
event.preventDefault();
this.props.fetchWeather(this.state.term);
this.setState({term:''})
}
...
Also, don't forget to bind it to the class in constructor:
class SearchBar extends Component {
constructor(props) {
super(props);
this.state = {term: ''};
this.onInputChange = this.onInputChange.bind(this);
this.onFormSubmit = this.onFormSubmit.bind(this)
}
...