1.下载依赖包
npm i redux react-redux redux-thunk redux-devtools-extension
2.src下新建store文件夹
store文件夹新建如下目录
----store // redux相关存放文件夹
---index.js // redux出口文件
---actions/模块.js // 存放组件中dispatch的函数
---actionTypes.js // 存放dispatch携带的type常量
---reducers/index.js // 主要用来合并模块并导出store
---reducers/模块.js // store中模块的reducers
3.store/模块文件
模块文件需要写入reducer的函数并设置默认状态
/*
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
}
}
4.reducer/index.js
/*
1.从redux中导入合并reducers中的方法
2.导入相关模块进行合并导出
*/
import { combineReducers } from 'redux'
import Channel from './Channel'
import NewsList from './NewsList'
export default combineReducers({
Channel,
NewsList
})
5.配置store/index.js文件
// 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))
)