redux

connect.js

import { connect } from 'react-redux'

import { loadListData,loadDetailData } from '../../actionCreator'

let mapStateToProps = (state) => {
 // console.log( state.getIn(['home','detaillist']))

  //console.log( state.getIn(['home','detaillist']))

  return {
    // list: state
    detaillist : state.getIn(['home','listdata']),
    listData : state.getIn(['home','detaillist'])
  }
}

let mapDispatchToProps = (dispatch) => {
  return {
    loadDetailData(url) {
      // console.log(url)
      // loadData是actionCreator返回的，结果是一个action(plain object)
      dispatch(loadDetailData(url))
    },
    loadListData(number) {
      // loadData是actionCreator返回的，结果是一个action(plain object)
      dispatch(loadListData(number))
    },
   
    
  }
}

export default connect(mapStateToProps, mapDispatchToProps)

actioncreate.js

const loadData = (number) => {
    return {
       type: "SAGA_LOAD_DATA",
       number
     }
   }
const loadListData = (number) => {
    return {
        type: "SAGA_LOAD_LIST_DATA",
        number
      }
    }
const loadDetailData = (url) => {
    return {
        type: "SAGA_LOAD_DETAIL_DATA",
        url
      }
    }
const loadPrductData = (url) => {

    return {
        type: "SAGA_LOAD_PRODUCT_DATA",
        url
      }
    }
const loadPrductlistData = (url) => {
    //console.log(url)
    return {
        type: "SAGA_LOAD_PRODUCTList_DATA",
        url : url.url,
        value : url.value
      }
    }


 
   
   export {
     loadData,
     loadListData,
     loadDetailData,
     loadPrductData,
     loadPrductlistData
   }

index.js

import Index from "./index/container/Index"
import reducer from './reducer'
import * as sagas  from './sagas'

export {
Index,
reducer,
sagas
}

reducer.ks

import { Map ,List} from "immutable";

let defaultState =Map( {
    list: [],
    productdata : [],
    listdata : [],
    detaillist : [],
    productlistdata : {}
  })
  
  const reducer = (state = defaultState, action) => {
    switch(action.type) {
      //swiper图片
      case 'LOAD_DATA':
      //  console.log(action.list)
        // return {
        //   list: action.list
        // } 
        return state.setIn(['list'], action.list) 
        //左边列表
      case 'LOAD_LIST':
         
          // return {
          //   detaillist: action.list
          // } 
          // console.log(detaillist)
          return state.setIn(['listdata'], action.list)
          //右边列表
      case 'DETAIL_LIST':


       // console.log('DETAIL_LIST')
        // return {
        //   detaillist: action.list
        // } 
        // console.log(detaillist)
        return state.setIn(['detaillist'], action.list)
        //产品数据
      case 'PRODUCT_DATA':


        // console.log(action.list)
          // return {
          //   detaillist: action.list
          // } 
          // console.log(detaillist)
          return state.setIn(['productdata'], action.list)

        //详情
        case 'PRODUCTLIST_DATA':

          //console.log(action)


            return state.setIn(['productlistdata', action.value ], action.list)
      
      default:
        return state
    }
  }
  
  export default reducer

saga.js

import { call, put } from 'redux-saga/effects'
import { get } from 'utils/http'

function* loadData() {
try {
  const list = yield call(get, { url: '/swiper/sg/cms/home/banner.json?itemsId=100' })
    yield put({
      type: "LOAD_DATA", 
      list: list.data
    }
 
  )
 // console.log(list)
} catch (e) {
  yield put({type: "LOAD_DATA_FAILED", message: e.message});
}
}
function* loadlistData(action) {
//console.log(action)
try {
  const list = yield call(get, { url: '/swiper/sg/cms/navigation/getNavigations.json?parentId=0' })
    yield put({
      type: "LOAD_LIST", 
      list: list.data
    }
  )
 // console.log(action.number)
} catch (e) {
  yield put({type: "LOAD_DATA_FAILED", message: e.message});
}
}

function* loaddetaillist(action) {
//console.log(action.url)
try {
  const list = yield call(get, { url: `/swiper/sg/cms/navigation/getNavigations.json?parentId=${action.url}` })
    yield put({
      type: "DETAIL_LIST", 
      list: list.data
    }
  )
  //console.log(list)
} catch (e) {
  yield put({type: "LOAD_DATA_FAILED", message: e.message});
}
}

function* loadproductdata(action) {
//console.log(action.url)
try {
  // const list = yield call(get, { url: `/swiper/sg/cms/navigation/getNavigations.json?parentId=${action.url}` })
  const list = yield call(get, { url:` /data/search/commonLoadItemNew.html?streetId=12048135&productCateId=${action.url}&pageIndex=1&pageSize=10` })
  //console.log(list) 
  yield put({
      type: "PRODUCT_DATA", 
      list: list.data.productList,
      
    }
  )
  
} catch (e) {
  yield put({type: "LOAD_DATA_FAILED", message: e.message});
}
}
// 

function* loadproductlistdata(action) {
//console.log(action.url)
try {
  // const list = yield call(get, { url: `/swiper/sg/cms/navigation/getNavigations.json?parentId=${action.url}` })

  //console.log(action)

  const list = yield call(get, { url : action.url })
  //console.log(list) 
  yield put({
      type: "PRODUCTLIST_DATA", 
      list : list.data,
      value : action.value
    }
  )
  
} catch (e) {
  yield put({type: "LOAD_DATA_FAILED", message: e.message});
}
}

export {
loadData,
loadlistData,
loaddetaillist,
loadproductdata,
loadproductlistdata
}

index.ks

import store from './store/'
import {Provider} from 'react-redux' 

// react

import App from './App'

ReactDOM.render(
  <BrowserRouter>
    <Provider store = {store}>
      <App></App>
    </Provider>
  </BrowserRouter>
  ,
  document.querySelector('#root')
)