Redux 使用示例(获取区域列表)
一、action
定义动作
export const RECEIVE_AREA = "RECEIVE_AREA";
import httpUtil from '../net/HttpUtil';
import Apicfg from '../net/ApiConfig';
var Apis = new Apicfg();
//action（返回值为对象，其中必须包含type值）
export const receiveAreas = data => {
return {
type: RECEIVE_AREA,
data
}
};
//获取列表（中间件，需要请求网络调用此方法）
export const getZones = () => (dispatch, state) => {
var params = {
service: Apis.GROUP_DETAIL
};
return dispatch(dispatch => httpUtil.post(params, function (data) {
if (data.code == 0) {
dispatch(receiveZone(data.body));
} else {
console.log("msg: " + data.msg);
}
}));
};
请求中间件之后会执行下面HttpUtil中的post函数，请求成功后会执行成功的回调方法；执行完action的函数之后会将其返回值作为参数，自动执行reducer中的函数，返回值作为第二个参数
如果不需要请求网络，直接发送普通action即可
HttpUtil
import $ from 'jquery';
export default {
/**
*网络请求
* @param params 请求参数
* @param successCallback 请求成功回调方法
* @param url 请求地址(若非特殊情况,该参数不需要传,使用默认值即可)
*/
post(params,
successCallback = function (data) {
console.error("data: ", JSON.stringify(data));
}, url = "/api/gateway"){
console.log("request url: " + url + ", params: " + JSON.stringify(params));
$.ajax({
url: url,
type: 'post',
data: params,
dataType: 'json',
success: successCallback.bind(this),
error: function (xhr, status, err) {
console.error("error: ", status, err.toString());
}.bind(this)
});
}
}
二、reducer
执行动作
./repair/Area.js
import {RECEIVE_AREA} from '../../actions/repair/Area';
//reducer(第一个参数为上一次返回值，第二个参数为action返回值)
export function areaList(state = [], action) {
switch (action.type) {
case RECEIVE_AREA:
return action.data;
default:
return state;
}
}
程序加载时会初始化reducer中的函数，返回值为定义的初始值，switch中必须有返回值，否则程序将出错，建议直接返回state
index.js
import {combineReducers} from 'redux';
import {areaList} from './repair/Area';
const todoApp = combineReducers({
areaList
});
export default todoApp;
创建store时会指定reducer文件，所以需要将自定义的reducer在index.js文件中注册，切记！！！
三、containers
准备结果
import {connect} from 'react-redux';
import Header from '../../components/repair/area/Header';
//将state的值存放到props上，方便取用
//state为全局唯一的state，areaList为reducer中定义的函数名
function mapStateToProps(state) {
return {
areaList: state.areaList
}
}
export default connect(mapStateToProps)(Header);
通过connect方法将React和Redux连接，只有连接的React组件（上面的Header）才可以通过this.props.xxx获取到上面mapStateToProps方法中返回对象的Key获取到state中相对应的值。
四、component
请求和获取结果
import React from 'react';
//引入action定义的函数
import {getAreas} from '../../../actions/repair/Area';
export default React.createClass({
//页面加载时通过dispatch方法发送action
componentDidMount(){
this.props.dispatch(getAreas({group_id: 1}))
},
render(){
//通过this.props获取containers定义的值
var areaList = this.props.areaList;
if (areaList.length > 0) {
console.log("areaList: " + JSON.stringify(areaList[0]));
}
return (
<div>
区域配置
</div>
)
}
})
通过dispatch发送action，修改state之后会重新渲染页面，如同React的setState方法，实际使用中根据需求可以二者并用。
