import { config } from 'react-redux-creator'
import fetch from './utils/fetch'

config({
  fetchMethod: fetch, // 全局配置fetch
  history: 'browser', // 默认
  logger: true, // 开启redux-logger
  autoActions: true, // 是否开启saga自动success和错误的reset
})

ReactDOM.render(
  <Provider routes={routes} />, {/* 配置路由 */}
  document.getElementById('app'),
)

{
  loading: false, // 异步加载状态, start()方法后会变true
  success: false, // 异步成功状态， success()方法后变true
  error: false, // 错误状态，error()方法后变true
  params: null, // start(params)方法传入
  data: null, // success(data)方法传入
}

// initState可扩展初始化数据

import '@babel/polyfill'

import React from 'react'
import ReactDOM from 'react-dom'
import { Provider, config } from 'react-redux-creator'
import fetch from './utils/fetch'
import routes from './routes'

// 初始化react-redux-creator
config({
  fetchMethod: fetch, // 全局定义fetch请求方法
  logger: true, // 是否开启redux-logger
  history: 'browser', // 路由的history
})

ReactDOM.render(
  <Provider routes={routes} />, {/* 配置路由 */}
  document.getElementById('app'),
)

import * as React from 'react'

import { Route, Switch } from 'react-router' 
import Home from '../pages/home'

const routes = () => {
  return (
    <Switch>
      <Route exact path="/" component={Home} />
    </Switch>
  )
}
export default routes

import { buildRedux } from 'react-redux-creator'
import { obj2params } from '../utils/objectHelper'

export const companyAddRedux = buildRedux('companyAdd')({
  onResult: (data, payload, config) => ({ ..handled data })
})

export const companyListRedux = buildRedux('companyList' )({
  url: function*(payload, config){
    const { page, limit } = payload
    const { getState } = config
    const state = yield getState('companyList') // e.g. { name: 1, ... }
    const params = obj2params(state.params)
    
    // 返回请求 '/api/company?page=1&page-size=10&name=1'
    return `/api/company?page=${page}&page-size=${limit}&${params}` 
  },
  onResult: function*(data, payload, config) {
    // 对网络请求后的数据进行添加额外extract属性
    return {
      ...data,
      extract: 'extractData'
    }
  },
  onAfter: function* (data, payload, config) {
    const { put, getAction } = config
    
    // 发起其他的action
    yield put(getAction('companyAdd').start()) 
  },
  onError: (err) => console.log('Error', err)
})

// 备注：url, data, onResult, onAfetr, onError 都可接受function或者generator function, 
//      如果有异步处理，请使用function* 配合yield call(function, ...arguments) 或者 yield put(action)使用

import React from 'react'
import { connect } from 'react-redux-creator'
import { companyAddRedux, companyListRedux } from './redux'

class Home extends React.Component {
  componentDidMount() {
    this.props.actionList()
  }

  render() {
    return <div>Hello</div>
  }
}

export default connect(
  state => ({
    companyList: state.companyList,
  }),
  {
    actionList: (params) => companyListRedux.start(params),
    actionAdd: (params) => companyAddRedux.start(params),
  },
)(Home)