// 可以通過provider和connect在組件中對狀態(tài)管理器進行‘鏈接'，鏈接成功之后就可以使用狀態(tài)管理器中的狀態(tài)和方法了
 
// /src/xxx/index.jsx
import {connect} from 'react-redux'
 
function App (props) {
    ...
}
export default connet(mapStateToProps, mapDispatchToProps)(App)
     
// /index.js
import {Provider} from 'react-redux'
import App from './App.jsx'
import store './store/index.js'
     
ReactDom.render (
    <React.StrictMode>
        <Provider store = { store }>
            <App />
        </Provider>
    </React.StrickMode>
)
 
//也可以使用到裝飾器的高階函數(shù) @connect @withRouter
 
//以往從狀態(tài)樹取出對應(yīng)的數(shù)據(jù)，讓后通過props傳給組件使用通過react-redux自帶的connect()方法
class Home extends React.Component {
    //....
}
export default connect(state => ({todos: state.todos}))(Home);
 
//使用裝飾器的話就變成這樣，好像沒那么復(fù)雜
@connect(state => ({ todos: state.todos }))
class Home extends React.Component {
    //....
}

const App = (props) => {
    // 組件中直接就可以通過props訪問到狀態(tài)管理器中的狀態(tài)
    props.adminname
    props.count
    props.bannerList
    props.reduceFn
    ...
}
export default connect(
    // 可以看到這里就是傳入兩個函數(shù)，返回兩個函數(shù)
    state => {
        return {
            adminname: state.getIn(['user', 'adminname']),  //這是一種存儲狀態(tài)的方式，一會會講到
            count: state.app.count,     //參數(shù)是state，我們把app狀態(tài)管理器中的count屬性傳遞到props中的count
            bannerList: state.pro.bannerList,
        }
    },
    dispatch => {
        return {
            reduceFn () {   //我們在這里定義了一個reduceFn，里面是dispatch的方法，我們在props中就可以通過reduceFn這個方法發(fā)送'REDUCE'提交的信息
                dispatch({
                    type: 'REDUCE',
                    payload: 5  //payload為參數(shù)，可以不傳
                })
            }
        }
    }
)(App)

//在store.js之中把thunk引入并掛載到狀態(tài)管理器中
 
import { createStore, combineReducers, applyMiddleware} from 'redux'
 
import thunk from 'redux-thunk'
import app from './modules/app'
import pro from './modules/pro'
 
const reducer = combineReducers({
  app, pro
})
// 通過applyMiddleware將thunk掛載到狀態(tài)管理器
const store = createStore(reducer, applyMiddleware(thunk))
 
export default store

// .../store/actionCreator/pro.js
 
// 這個文件就是專門用來觸發(fā)異步操作
// thunk模塊執(zhí)行的時候， actionCreator 函數(shù)有默認(rèn)的參數(shù)為dispatch
// 該dispatch 可以用來觸發(fā)reducer
// 有時候在觸發(fā)異步的時候， 需要傳遞參數(shù)，這個時候，可以在函數(shù)內(nèi)部返回一個 actionCreator 函數(shù)
const actions = {
  getBannerListAction (dispatch) {
    fetch('http://121.89.205.189/api/banner/list')
    .then(res => res.json())
    .then(res => {
      dispatch({
        type: 'CHANGE_BANNER_LIST',
        payload: res.data
      })
    })
  },
  getProListAction (count) {   //有參數(shù)，返回一個函數(shù)，函數(shù)參數(shù)默認(rèn)為dispatch
    count = count || 1
    return function (dispatch) {
      fetch('http://121.89.205.189/api/pro/list?count=' + count)
      .then(res => res.json())
      .then(res => {
        dispatch({
          type: 'CHANGE_PRO_LIST',
          payload: res.data
        })
      })
    }
  }
}
 
export default actions

import actions from './store/actionCreator/pro'
const App = (props) => {
    // props之中可以直接訪問到
    props.reduceFn()
    props.addFn()
    props.getBannerList()
    props.getProList()
}
 
const mapStateToProps = (state) => {
  return {
    count: state.app.count,
    bannerList: state.pro.bannerList,
    proList: state.pro.proList
  }
}
 
const mapDispatchToProps = (dispatch) => {
  return {
    reduceFn () {       //通過正常方式修改狀態(tài)
      dispatch({       
        type: 'REDUCE',
        payload: 5
      })
    },
    addFn () {
      dispatch({
        type: 'ADD',
        payload: 5
      })
    },
    getBannerList () {      //通過thunk方式修改狀態(tài)
      dispatch(actions.getBannerListAction)
    },
    getProList () {
      dispatch(actions.getProListAction(2))
    }
  }
}
 
export default connect(mapStateToProps, mapDispatchToProps)(App)

yarn add redux-saga  immutable redux-immutable -S

import { createStore, combineReducers, applyMiddleware } from 'redux'
 
import createSagaMiddleware from 'redux-saga'
 
import mySaga from './mySaga' //異步操作說明
 
import home from './modules/home'
import app from './modules/app'
 
const reducer = combineReducers({
  app,
  home
})
 
const sagaMiddleware = createSagaMiddleware()   //生成saga中間件
 
const store = createStore(reducer, applyMiddleware(sagaMiddleware))
//建立鏈接
//和thunk一樣，把saga中間件掛載到狀態(tài)管理器中就可以使用saga的方式修改狀態(tài)了
 
sagaMiddleware.run(mySaga)
//run： 發(fā)送
// 這里是封裝了一個mySage函數(shù)作為修改狀態(tài)的函數(shù)
 
export default store

import { call, put, takeLatest } from 'redux-saga/effects'
 
import { getBannerList, getProList } from '../api/home'
 
//  redux-saga    --->    必須與generator函數(shù)一起使用
 
function * getBannerListAction() {
  const res = yield call(getBannerList) //call--調(diào)用函數(shù)
  yield put({
    type: 'CHANGE_BANNER_LIST',
    payload: res.data
  })
}
function * getProListAction (action){
  const res = yield call(getProList, action.payload)
  yield put({
    type: 'CHANGE_PRO_LIST',
    payload: res.data
  })
}
 
function * mySaga () {
  yield takeLatest('REQUEST_BANNER_LIST', getBannerListAction)
  yield takeLatest('REQUEST_PRO_LIST', getProListAction)
}
 
export default mySaga

// mysaga文件中我們定義了發(fā)送的方式
import { takeLatest } from 'redux-saga/effects'
// takeLatest ---分配任務(wù)；在下方。我們自己定義了key并為其分配了事件，這些事件就是store.dispatch()函數(shù)使用的
 
function * getProListAction (action){
  const res = yield call(getProList, action.payload)
  yield put({
    type: 'CHANGE_PRO_LIST',
    payload: res.data
  })
}
function * mySaga () {
  yield takeLatest('REQUEST_PRO_LIST', getProListAction)
}
 
//  我們以后再想修改狀態(tài)的時候就不需要使用store.dispatch()這樣修改了
//  可以使用這個文件中定義的key值進行修改
 
//  我們在組件的connect中這樣定義自定義函數(shù)，直接根據(jù)key值調(diào)用這里的修改方法
dispatch => {
    dispatch({ type: 'REQUEST_PRO_LIST'})
}
 
 
// put, call
//  call ---> 含義是調(diào)用
//  put ---> 含義是推，把當(dāng)前的action推到下一個去執(zhí)行（隊列）。
 
yield put(action)
yield call(fn)