目录
1,redux的工作流程
2.安装redux
npm i redux --save
3.redux概念了解
redux是一个专门用于做状态管理的js库(不是react插件库)
可以用在react,angular,vue项目中,基本与react配合使用
作用:集中式管理react应用中多个组件共享的状态
4.创建Redux中的仓库-store和reducer
首先,创建一个store文件夹,然后创建一个index.js文件,再创建一个reducer.js文件
import { createStore } from "redux";
//引入reducer文件
import reducer from './reducer'
let store=createStore(reducer)
export default store
reducer.js文件
const defaultState={
value:‘张三’,
list:[
'您好',
'hello'
]
}
//业务逻辑可以写这里
export default (state=defaultState,action)=>{
return state
}
这样,简单的store和reducer就搭建好了,现在我们在组件中使用store仓库
首先进行引入
import store from './store'
然后我们可以打印一下store,打印结果如下,他有一个getState()方法
然后在页面渲染我们getState里面的值即可
注:reducer只能接收state,不能改变state
5.redux中间件( Redux-thunk)
安装
npm i redux-thunk --save
配置
import { createStore,applyMiddleware } from "redux";
import thunk from 'redux-thunk'
//引入reducer文件
import reducer from './reducer'
let store=createStore(reducer,applyMiddleware(thunk))
export default store
creatStore只能接收两个参数,如果想要定义多个参数,我们可以使用增强函数(compose)
异步处理写在中间件Redux-thunk中
解决异步action不能使用function方法,如果我们不使用中间件,那么我们如果在action中使用函数,那么他会进行报错
6.combineReducers使用
作用:合并多个reducer函数
redux的combineReducers()可以方便的将redux的reducer拆分为各个小的reducer文件,统一调用各自的reducer,方便统一管理
creatStore只能接收两个参数,如果想要定义多个参数,我们可以对多个reduce进行合并,使用combineReducers
import { createStore,applyMiddleware,combineReducers } from "redux";
import countReduce from '../reduces/count_reduce'
import todoReduce from '../reduces/todolist_reduce'
import thunk from 'redux-thunk'
// 使用redux官方提供的合并reduce方法
const allReducer = combineReducers({
count:countReduce,
todolist:todoReduce
})
// 第一个参数为全部reduce,第二个参数为使用支持异步action的中间件
let store = createStore(allReducer,applyMiddleware(thunk))
export default store