前言： 上篇文章大概说了一下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
