npm i redux react-redux redux-thunk redux-devtools-extension

----store                 // redux相關(guān)存放文件夾
    ---index.js           // redux出口文件
    ---actions/模塊.js    // 存放組件中dispatch的函數(shù)
    ---actionTypes.js     // 存放dispatch攜帶的type常量
    ---reducers/index.js  // 主要用來(lái)合并模塊并導(dǎo)出store
    ---reducers/模塊.js   // store中模塊的reducers

/*
    1.定義初始狀態(tài)，初始狀態(tài)要根據(jù)實(shí)際業(yè)務(wù)確定（慎重），根據(jù)實(shí)際業(yè)務(wù)確定初始狀態(tài)是數(shù)組還是對(duì)象
    2. 導(dǎo)出一個(gè)reducers的函數(shù) 并設(shè)置默認(rèn)狀態(tài) 下面天譴寫(xiě)好Swatch的格式
*/
const initChannels = {
  activeId: 0,
  channels: []
}
 
export default function Channels (state = initChannels, action) {
  switch (action.type) {
    case action.type:
      return action.type
    default:
      return state
  }
}

/*
      1.從redux中導(dǎo)入合并reducers中的方法
      2.導(dǎo)入相關(guān)模塊進(jìn)行合并導(dǎo)出 
*/
 
import { combineReducers } from 'redux'
import Channel from './Channel'
import NewsList from './NewsList'
 
export default combineReducers({
  Channel,
  NewsList
})

// 1.導(dǎo)入創(chuàng)建store的方法和中間件的方法
import { createStore, applyMiddleware } from 'redux'
// 2.導(dǎo)入thunk使dispatch內(nèi)部可以寫(xiě)函數(shù)
import thunk from 'redux-thunk'
// 3.導(dǎo)入redux調(diào)試工具
import { composeWithDevTools } from 'redux-devtools-extension'
// 4.導(dǎo)入reducers并掛載
import rootReducers from '@/store/reducers'
/* 5.創(chuàng)建store
    第一個(gè)參數(shù)是reducers第二個(gè)參數(shù)是先注冊(cè)
    第二個(gè)參數(shù)先使用redux調(diào)試工具最外層包裹 在使用中間件對(duì)thunk進(jìn)行包裹
*/
export default createStore(
  rootReducers,
  composeWithDevTools(applyMiddleware(thunk))
)