block12.javascript

// Clients.jsx

import React from 'react';

// import flux actions
import ClientActions from 'ClientActions';

// import flux store
import ClientStore from 'ClientStore';

class Clients extends React.Component {
    // Set the initial state
    constructor(props) {
        super(props);
        const { clients } = ClientStore.getState();
        this.state = { clients };
    }

    // Set flux listener
    componentDidMount() {
        ClientStore.addChangeListener(this._onChange);
        // Request clients from server
        ClientActions.getClients();
    }

    // remove flux listener on unmount
    componentWillUnmount() {
        ClientStore.removeChangeListener(this._onChange);
    }

    // update the state when flux emits a change event
    _onChange = () => {
        const { clients } = ClientStore.getState();
        this.setState({ clients });
    };

    _reverseOrder = () => {
        // previously, using Flux:
        // ClientActions.toggleSorting();
        // now with Redux:
        this.props.toggleSorting();
    };

    render() {
        return (
            <div>
                <button type="button" onClick={this._reverseOrder}>
                    Reverse order
                </button>
                <ul>{this.state.clients.map(client => <li key={client.id}>{client.name}</li>)}</ul>
            </div>
        );
    }
}

export default Clients;