任何对数据的才做都会经理renducer,reducer要求是个纯函数(在函数内部不能修改函数的参数(输入),要有返回值),它的功能是:传入旧的state,根据action对state做操作,返回新的state。
redux是什么
Redux是为javascript应用程序提供一个状态管理工具
,集中的管理react中多个组件的状态。
redux是专门作状态管理的js库(不是react插件库可以用在其他js框架中例如vue,但是基本用在react中
)
什么时候用redux
需求场景:
某个组件的状态需要共享的时候
某个组件的状态需要在任何地方都可以拿到
一个组件需要改变全局状态
一个组件需要改变另一个组件的状态
redux三大原则
1、单一数据源
:整个应用的 state 被储存在一棵 object tree 中,并且这个 object tree 只存在于唯一一个 store 中
2、State 是只读的
:唯一改变 state 的方法就是触发 action,action 是一个用于描述已发生事件的普通对象。
3、使用纯函数来执行修改
:为了描述 action 如何改变 state tree ,你需要编写 reducers(一些纯函数,它接收先前的 state 和 action,)
redux常用概念
1、Store
:管理着整个应用的状态,可以通过getState()来重新获得最新的状态(state)
。
2、Actio
n:是唯一可以改变状态(state)的方式
,服务器的各种推送、用户自己做的一些操作,最终都会转换成一个个的Action,而且这些Action就是修改的动作,可以通过dispatch()方法来进行调用
。
3、Reducer
:Reducer 是一个纯函数,它接收 Action 和当前 State 作为参数,返回一个新的 State。(纯函数就是只要传入相同的参数,每次都应返回相同的结果
)。
redux常用方法
1、createStore()
作用:创建一个Redux store来存放应用中所有的state,一个应用只能有个store。函数返回store对象。
2、getState()
作用:获取数据
3、dispatch()
分发action,这是改变state的唯一方法。
4、subscribe()
添加一个变化监听器,每当改变store的时候就会执行
redux成员
成员 | 作用 | 类型 |
---|---|---|
createStore(reducer,state) | 创建store实例(state:仓库存放的数据;reducer:对数据的操作) | 函数 |
combineReducers | 合并多个reducer | 函数 |
applyMiddleware | 安装中间件,改装增强redux | 函数 |
store成员
成员 | 作用 | 类型 |
---|---|---|
subscribe(回调函数) | 订阅state变化 | 函数 |
dispatch(action) | 发送action 给 reducer | 函数 |
getState() | 获取一次state的值 | 函数 |
replaceReducer | 一般在 Webpack Code-Splitting 按需加载的时候用 | 函数 |
使用(小试牛刀)
1、下载:
cnpm install --save redux
2、创建store实例
并引入state(数据),和reducer
3、创建state也就是数据
4、创建reducer
Action就是修改的动作,可以通过dispatch()方法来进行调用
5、在页面调用redux中的数据并盗用修改操作,对数据进行修改。
现在点击按钮就可以对redux数据进行修该了。
可以在reducer.js中打印action看看每次点击的你返回值是什么
附上截图
点击+1,action.type返回ADD执行了+1操作
点击-1,action.type返回DEL执行l-操作
我们在调用action(也就是修改操作),也可以返回数据给action
可以看一下控制台打印结果
可以看到点击+1,action得到了payload:5;点击-1,action得到了payload:2
那么我们就可以在reducer中使用页面返回的数据,对数据进行修改,如下图
如果state.js中有多条数据,看一下现在的写法
如果有多条数据,那我页面中,监听到数据变化后,多条数据都需要重更新。
在一个就是reducer中需要这样写
提取action进行封装
下面先将重新封的redux截图贴上
1、index.js
2、state.js
3、reducer.js
4、盗用redux的页面
接下来对action进行封装(是唯一可以改变状态)
也就是对下图标红的地方进行封装,封装的意义就是,如果不封装,那么人物是在各个组件里面的,不易查找,容易重复,封装在一起解决这些问题。
新建一个文件夹actionCreate.js,在其中对人物进行封装
封装完成之后再页面调用。
如果需要传递参数的话,一形参的方式传递给封装的人物,然后在,reducer.js中接收即可。
1、传递数据给action
2、在人物中接收
3、使用数据
action里处理异步—redux-thunk
需要安装中间件 redux-thunk ,redux-thunk可以增强dispatch的功能,让dispatch可以接收一个函数作为参数。
注:使用thunk后,actionCreate.js的action可以是个函数,如果return的是一个函数就会自动接收一个dispatch方法,axios请求结果获得后,再去走上面的reducer流程,代码如下:
applyMiddleware:
安装中间件,改装增强redux
1、安装:npm install redux-thunk --save
引入使用
使用thunk后,如果return的是一个函数就会自动接收一个dispatch方法,axios请求结果获得后,再去走上面的reducer流程,代码如下: