redux、sagas实例 EngineerList.js

EngineerList.js

import React, {PropTypes} from 'react'
import {connect} from 'react-redux'
import {link, hashHistory} from 'react-router'
import ReactDOM from 'react-dom'
import { Table, Input, Icon, Button, Popconfirm } from 'antd'

import PagerListView from '../controls/PagerListView'
import * as customerAction from '../../store/actions/customer'
import common from '../../configs/common'
import {toastShort} from '../../utils/Toast'
import PageTitle from '../controls/PageTitle';
import SearchBar from '../controls/SearchBar';
import {checkNull} from  '../../utils/tools';
function mapStateToProps(state) {
  const { customer } = state;
  return {
    customer
  };
}

import { Pager } from '../../store/pager';
let tempData=new Pager();
//tempData.fetch(tempData.createAction('INIT'))
//tempData.receive(data,30);



class EngineerEngineerList extends React.Component {
    static get propTypes() {
        return {
          customer: PropTypes.object
        };
    }
    constructor(props) {
      super(props);
      this.pageFlag='EngineerList';
      this.state = {        
        searchName:"",
      };
    }
    componentDidMount() {
        
        this._initList();
    }

      // 获取列表
    _initList=()=>{
      const { dispatch,customer } = this.props;
      const {searchName}=this.state;
      let subParams={
        name:searchName,
        page:1,
        size:1,
      };
      dispatch(customerAction.requestCustomerCustomerList(common.api.URI_ENGINEER_ENGINEERS_LIST,subParams));
    }
     // 翻页
    _pageList() {
      //const { dispatch, customer } = this.props;
      //dispatch(customerAction.requestCustomerCustomerList(customer.customerList.createAction('PAGE', this.state.searchParams)));
    }
    
  
    render() {
      const { dispatch,customer } = this.props;  
     
      let columns = [
        {  title: '姓名',  key:'name',  dataIndex: 'name'}, 
        {  title: '维修标签',  key: 'tags',  dataIndex: 'tags',  render:(text, record) =>
          {
            if(checkNull(text)!="" && text.length>0 ){
              return(
                text.map((item,index)=>{
                  return(
                  <span key={index} style={{padding:'0px 5px'}}>{item}</span>
                  )
                })
              )
            }else{
              return null;
            }
          }
        }, 
        {  title: '维修经验',  key: 'experience',  dataIndex: 'experience',},
        {  title: '考核评分',  key: 'score',  dataIndex: 'score',},
        {  title: '状态',  key: 'status',  dataIndex: 'status',},
        {  title: '操作',  key:'action',  dataIndex: '操作',  render: (text, record) => 
          {
            return (
              <div style={{display: 'flex',color: '#108ee9'}}>
                <p style={{flex: 1, cursor: 'pointer'}} onClick={() => hashHistory.push('/EngineerEngineerEdit')}>修改</p>
                <p style={{flex: 1, cursor: 'pointer'}} onClick={() => hashHistory.push('/ProductEngineerDetails')}>查看</p>
                <Popconfirm title="确定删除?" onConfirm={() => this.onDelete(record.name)}>
                  <a href="#"  style={{flex: 1}}>删除</a>
                </Popconfirm>
              </div>
              
            );
          },
      }
    ]; 
      
      return (
        <div>
          <PageTitle title='维修师列表'/>
          <div style={{display: 'flex'}}>
            <SearchBar 
              group={[{
                  title:'姓名',
                  type:'input',
                  key:'name',
                }]}
              
              buttons={
                <Button 
                  style={{
                    marginLeft: 15,  
                    marginBottom: 15,
                  }}
                  type="primary" 
                  size='large'
                  onClick={()=>{
                    hashHistory.push({
                      pathname:'EngineerEngineerEdit'
                    })
                  }}
                >
                  添加
                </Button>}
            />
            <Button 
              style={{
                marginLeft: 15,
                marginBottom: 15,
                marginTop: 15,
              }}
              type="primary" 
              size='large'
              onClick={()=>{
                this._initList()
              }}
            >
              导入
            </Button>
          </div>

          <PagerListView
            pager={customer.engineerList}
            onPage={this._pageList.bind(this)}
            columns={columns}
          />
        </div>
      );
    }
  }


export default connect(mapStateToProps)(EngineerEngineerList)

actions

customer.js

/**
 * 客户相关 - action组件
 *
 * @date    2017-10-12
 * @author  wuxiaoyan<408991702@qq.com>
 */


/**
 * 获取客户列表
 * @param {pageFlag} 页面标志
 * @param {submitUrl} 提交URL
 * @param {params} 参数列表
 * @param {PagerAction} pagerAction - 参数列表
 */
export function requestCustomerCustomerList(submitUrl,params){
  return {
    type: 'REQUEST_CUSTOMER_CUSTOMER_LIST',
    submitUrl,
    params
  };
}
export function fetchCustomerCustomerList(params) {
  return {
    type: 'FETCH_CUSTOMER_CUSTOMER_LIST',
    params
  };
}
export function receiveCustomerCustomerList(receiveData, total) {
  return {
    type: 'RECEIVE_CUSTOMER_CUSTOMER_LIST',
    receiveData, 
    total
  };
}

/**
 * 获取资讯列表
 * @param {PagerAction} pagerAction - 列表操作对象
 */
export function requestNewsList(pagerAction) {
  return {
    type: 'REQUEST_NEWS_LIST',
    pagerAction
  };
}
export function fetchNewsList(pagerAction) {
  return {
    type: 'FETCH_NEWS_LIST',
    pagerAction,
  };
}
export function receiveNewsList(data, total) {
  return {
    type: 'RECEIVE_NEWS_LIST',
    data, total
  };
}

reducers        customer.js

/**
 * 客户相关 - reducer组件
 *
 * @date    2017-07-17
 * @author  wuxiaoyan<408991702@qq.com>
 * 
 */
import { Pager } from '../pager';
const initialState = {
  customerList:new Pager(),//客户列表
  newsList: new Pager(),//咨询列表
  engineerList:new Pager(),//维修师列表
  engineer:{
    receiveLoading:false,//提交后Loading标志
    receiveSucess:false,//提交是否成功标志
    receiveData:{},//接收参数
  }
  //
};

export default function system(state = initialState, action) {
  
  switch (action.type) {
    //获取客户列表
    case 'FETCH_CUSTOMER_CUSTOMER_LIST':
      return Object.assign({}, state, {
        engineerList: state.engineerList.fetch(action.params)
      });
    case 'RECEIVE_CUSTOMER_CUSTOMER_LIST':
      return Object.assign({}, state, {
        engineerList: state.engineerList.receive(action.receiveData, action.total)
      });


    //咨询列表
    case 'FETCH_NEWS_LIST':
    return Object.assign({}, state, {
      newsList: state.newsList.fetch(action.pagerAction)
    });
    case 'RECEIVE_NEWS_LIST':
      return Object.assign({}, state, {
        newsList: state.newsList.receive(action.data, action.total)
      });
    default:
      return state;
  }
}

sagas        customer.js

/**
 * 客户相关 - saga组件
 *
 * @date    2017-07-17
 * @author  wuxiaoyan<408991702@qq.com>
 */

import { put, take, call, fork } from 'redux-saga/effects';
import * as ApiClient from '../../utils/ApiClient';
import Storage from '../../utils/Storage';
import common from '../../configs/common';

import {
  fetchCustomerCustomerList,
  receiveCustomerCustomerList,
  fetchNewsList,
  receiveNewsList
} from '../actions/customer';





// 获取客户列表
export function* requestCustomerCustomerList(submitUrl,params) {
  try {
    yield put(fetchCustomerCustomerList(params));
    const { page, size ,name} = params;
    //let params={  page: page + '', size: size + '', name:name+ ''};
    //delete params.pageNum;
    //delete params.pageSize;
    const res = yield call(ApiClient.get, submitUrl, params);
    if (common.api.validResponse(res)) {
      if (res.result && res.result.content ) {
        yield put(receiveCustomerCustomerList( res.result.content,res.result.totalElements));
      } else {
        yield put(receiveCustomerCustomerList([], 0));
      }
    } else {
      yield put(receiveCustomerCustomerList([], -1));
    }
  } catch (error) {
    common.api.getErrorTip(error);
    yield put(receiveCustomerCustomerList([], -1));
  } 
}
export function* watchRequestCustomerCustomerList(){
  while (true) {
    const { submitUrl,params } = yield take('REQUEST_CUSTOMER_CUSTOMER_LIST');
    yield fork(requestCustomerCustomerList, submitUrl,params);
  }
}

// 获取资讯列表
export function* requestNewsList(pagerAction) {
  try {
    yield put(fetchNewsList(pagerAction));
    const { pageNum, pageSize } = pagerAction.params;
    let params={  page: pageNum + '', size: pageSize + '',...pagerAction.params};
    delete params.pageNum;
    delete params.pageSize;

    const res = yield call(ApiClient.postForm, common.api.URI_NEWS_NEWS_LIST, params);
    if (common.api.validResponse(res)) {
      if (res.result && res.result.content ) {
        yield put(receiveNewsList(res.result.content, res.result.totalElements));
      } else {
        yield put(receiveNewsList([], 0));
      }
    } else {
      yield put(receiveNewsList([], -1));
    }
  } catch (error) {
    common.api.getErrorTip(error);
    yield put(receiveNewsList([], -1));
  } 
}
export function* watchRequestNewsList() {
  while (true) {
    const { pagerAction } = yield take('REQUEST_NEWS_LIST');
    yield fork(requestNewsList, pagerAction);
  }
}