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方法，实际使用中根据需求可以二者并用。