react-redux使用实例

/**
* redux使用
* 1.创建component页面
*/
import React, { Component, PropTypes } from 'react';
import { Link,Router, Route } from 'react-router';
import { connect } from 'react-redux';
import * as actions from '../../../actions/HelpCenter';




class TaskAuditSuccess extends Component {
//在业务逻辑里面使用router跳转
//例如：this.context.router.push(`/task`,{});
//跳转到路由为task的页面
    static contextTypes = {router: React.PropTypes.object.isRequired};


    static defaultProps = {
        //设置默认的props
    }

//初始化state
getInitialState(){
return {

}
}

    constructor(props) {
//获取传递过来的props属性
        super(props);
    }


    componentDidMount() {
//render之后调用的方法
    }
componentWillMount() {
//render之前调用的方法
    }


    render() {
        return (<div>


            </div>
        );
    }
}




function mapStateToProps(state) {
//当state改变的时候这里会设置将state的数据merge设置到props里面
    return {




    }
}
export default connect(mapStateToProps,action)(TaskAuditSuccess);


// 2.写action请求方法


import ajax from '@alipay/ajax';
const constants = require('../constants');//定义的所有action
import {message} from 'antd';
import {redirectTo,redirectToLogin} from '../utils';
import urls from '../urlConstants';//所有的url


/**
 * 获取文章列表信息
 * @returns {Function}
 */
function queryArticList(callback){
    return dispatch=>{
        return ajax({
            url:urls.queryHelpCenterList.url,
            method:'GET',
            success:(res)=>{
                if(res.stat === 'ok'){
                    dispatch({
                        type:constants.QUERY_ARTICLE_LIST,
                        data:res.data.value
                    });
                    callback && callback(res.data.value[0].id);
                }else if (res.stat === 'deny'){
                    redirectToLogin();
                }else {
                    redirectTo("/serverError");
                }
            },
            error: res => {
                redirectTo("/serverError");
            }
        })
    }
}


function getHelpCenterDetail(id){
    return dispatch=>{
        return ajax({
            url:urls.getHelpCenterDetail.url,
            data:{id},
            method:'GET',
            success:(res)=>{
                if(res.stat === 'ok'){
                    dispatch({
                        type:constants.GET_ARTICLE_BY_ID,
                        data:res.data.value
                    });
                }else if (res.stat === 'deny'){
                    redirectToLogin();
                }else {
                    redirectTo("/serverError");
                }
            },
            error: res => {
                redirectTo("/serverError");
            }
        })
    }
}
// 3.导出方法
module.exports = {
    queryArticList,
    getHelpCenterDetail
}


// 4.reducers文件夹新建dispatch跳转控制
import assign from 'object-assign';
const constants = require('../constants');
const initialState = {};


function update(state = initialState, action) {
    switch (action.type) {
        case constants.QUERY_ARTICLE_LIST:
            return assign({}, state, { articleList: action.data });
        case constants.GET_ARTICLE_BY_ID:
            return assign({}, state, { articleDetail: action.data });
        default:
            return state;
    }
}


module.exports = update;


// 5.在index.js里面导出
export helpCenter from './helpCenter.js';
// 6.在routers.js里面添加路由
import HelpCenterList from './components/Main/HelpCenter/HelpCenterList';.
<Route path="/helpCenterList" component={HelpCenterList}/>