react项目使用redux初始化方式

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.定义初始状态，初始状态要根据实际业务确定（慎重），根据实际业务确定初始状态是数组还是对象
    2. 导出一个reducers的函数 并设置默认状态 下面天谴写好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.导入创建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.创建store
    第一个参数是reducers第二个参数是先注册
    第二个参数先使用redux调试工具最外层包裹 在使用中间件对thunk进行包裹
*/
export default createStore(
  rootReducers,
  composeWithDevTools(applyMiddleware(thunk))
)