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)
    }
    ...

results matching ""

    No results matching ""