React之Redux-小项目练手

前言： 上篇文章大概说了一下Flux数据框架，以及Redux的一些具体概念，在实战中使用更多在React-redux，会帮我们自动做更多的处理。这篇文章我们直接使用React-Redux来做一个小项目

项目 分为两个组件： 一个搜索框，一个图片列表的展示框。功能为通过上面的搜索框向网络请求，并将返回的数据显示在下面的图片列表。网络请求主要使用axios 并将redux-promise来做中间件响应返回的数据。

我们首先完成搜索框组件， JSX代码如下

<form onSubmit={this.onFormSubmit} className="input-group">
                <input
                    placeholder="give me your fine city"
                    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>

主要编写onFormSubmit方法 触犯action 来请求网络数据

onFormSubmit(event) {
        event.preventDefault();
        // 此处是绑定Action
        this.props.fetchData(this.state.term);
        this.setState({term: ''});
    }

首先我们先编写Action方法 并在其中做网络请求 ，注意request变量是promise 并且处于Pending状态。

import axios from 'axios';
export const FETCH_DATA = 'FETCH_ANDROID';
export const API = 'http://gank.io/api/data';

export function fetchData(type) {
    // 此处用的是反序列号 不是单引号
    const url = `${API}/${type}/10/1`;
    const request = axios.get(url);
    return {
        type: FETCH_DATA,
        payload: request
    };
}

接着我们编写mapDispatchToProps方法来绑定Action，使用connect来包装组件

function mapDispatchToProps(dispatch) {
    //  将Action的动作通过props绑定到界面来
    return bindActionCreators({fetchData}, dispatch);
}

export default connect(null, mapDispatchToProps)(SearchBar);

通过点击绑定在View上的Action 发送一个Action 接着我们编写Reducer来接受发出的action 并更新state,此处网络请求涉及到异步Action 以及异步数据流。 注意此处的action已经不是我们点击出发的action 。

export default function (state = [], action) {
    switch (action.type) {
        case FETCH_DATA:
            return action.payload.data.results;
        default: {
            return state;
        }
    }
}

并且我们在顶层的Provider也不一样了，在创建Store的时候插入了中间件，网络请求的request为一个promise对象，此处的中间件则是自动处理promise 如果promise状态变为solved则重新发送一个action并将返回的异步数据。

import React from 'react';
import ReactDOM from 'react-dom';
import {Provider} from 'react-redux';
import {createStore, applyMiddleware} from 'redux';
import ReduxPromise from 'redux-promise';
import App from './components/app';
import reducers from './reducers/index';

const createStoreWithMiddleware = applyMiddleware(ReduxPromise)(createStore);
ReactDOM.render(
    <Provider
        store={createStoreWithMiddleware(reducers, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__())}>
        <App />
    </Provider>
    , document.querySelector('.container'));

最后简单看一下一个列表组件接受更新后state的数据并渲染

/**
 * Created by finch on 17/5/5.
 */
import React, {Component} from 'react';
import {connect} from 'react-redux';


class GankList extends Component {
    constructor(props) {
        super(props);
        this.renderLine = this.renderLine.bind(this);
    }

    renderLine(item) {
        return (
            <tr key={item._id} className="row">
                <td className="col-md-6">{item.type}</td>
                <td className="col-md-6"><img src={item.url} className="img-thumbnail"/></td>
            </tr>
        );
    }

    render() {
        return (
            <table className="table table-hover">
                <thead>
                <tr>
                    <th>美女</th>
                </tr>
                </thead>
                <tbody>
                {
                    this.props.gank.map(this.renderLine)
                }
                {
                    console.log("gank" + this.props.gank)
                }
                </tbody>
            </table>
        );
    }
}

function mapStateToProps({gank}) {
    return {gank};
}

export default connect(mapStateToProps)(GankList);

总结

两个组件之间通过redux来连接， SearchBar组件通过绑定Action，点击发出Action来请求网络数据，reducer接受action触发的网络请求返回的数据，并将数据更新到store上去,列表组件监听到store数据更新并将其渲染出来。 网络请求使用的是axios，全局布局使用的bootstrap样式，使用redux-promise来处理异步数据处理。

完整代码已经放在github上面了,可以下下来 npm start运行 https://github.com/finch001/ReduxDemo