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

----store                 // redux相關存放文件夾
    ---index.js           // redux出口文件
    ---actions/模塊.js    // 存放組件中dispatch的函數
    ---actionTypes.js     // 存放dispatch攜帶的type常量
    ---reducers/index.js  // 主要用來合并模塊并導出store
    ---reducers/模塊.js   // store中模塊的reducers

/*
    1.定義初始狀態(tài)，初始狀態(tài)要根據實際業(yè)務確定（慎重），根據實際業(yè)務確定初始狀態(tài)是數組還是對象
    2. 導出一個reducers的函數 并設置默認狀態(tài) 下面天譴寫好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中導入合并reducers中的方法
      2.導入相關模塊進行合并導出 
*/
 
import { combineReducers } from 'redux'
import Channel from './Channel'
import NewsList from './NewsList'
 
export default combineReducers({
  Channel,
  NewsList
})

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