前言:
在我们使用react进行开发时,管理不断变化的 state 非常困难。如果一个 model 的变化会引起另一个 model 变化,那么当 view 变化时,就可能引起对应 model 以及另一个 model 的变化,依次地,可能会引起另一个 view 的变化。直至你搞不清楚到底发生了什么。state 在什么时候,由于什么原因,如何变化已然不受控制。
所以我们需要把 state 进行统一管理,这样才能控制每一个state的变化,让我们的程序可读性更强,出错率更低。
一、什么是Redux?
Redux 是一个 JS 库,一个状态容器。
作用: 集中式管理 React 应用中 多个组件共享的状态
(1)它可以和 react,vue,angular 等一起使用,但一般都和 react一起使用 。
(2)Redux 可以 解耦 React(View层)于数据管理和对数据的操作,保持View层的纯净,
让每一个组件的职责划分更加清楚,同时又降低了React数据传递的难度和不可控性
(3)Redux 采用了中间件机制,既保证了代码的简洁,又增加了可扩展性。
Redux的三大原则:
(1)单一数据源
整个应用的state都被存储到一个状态树里面,并且这个状态树,只存在于唯一的store中
(2)State 是只读的
唯一改变 state 的方法就是触发 action,action 是一个用于描述已发生事件的普通对象。
(3)使用纯函数来执行修改
为了描述 action 如何改变 state tree ,你需要编写 reducers。
下面就让我们来一步步解析Redux的工作原理,以及关键功能。
二、Redux的工作原理
Redux关键功能解析:
1.Store:集中状态管理中心
(1)store就是保存数据的地方,当有数据改变时,store会调用reducer进行处理,完事后通知View层调用getState更新
(2)Redux提供createStore这个函数,用来生成Store,内部接收reducer
import {
createStore} from 'redux'
const store=createStore(reducer);
2.View层:由组件构成视图层
(1)接收数据时,调用getState( )接收Store的newState,并重新渲染更新视图
(2)用户操作时,通过事件触发制造action并派发 来通知Store来更新state
// 接收 State
const state=store.getState()
3.ActionCreator:一个工厂函数,负责产生action对象
(1)与View层的事件进行关联,一旦有通知就制造action对象
(2)action = {
type: action类型,
data: 事件携带的数据(可有可无)
}
const action={
type:'ADD_TODO',
payload:'redux原理'
}
在上面代码中,action的名称是ADD_TODO,携带的数据是字符串‘redux原理’,action描述当前发生的事情,这是改变state的唯一的方式 ( 通过action传值 )。
4.dispatch:派发action,方法使用了中间件机制
(1)store.dispatch()是view发出Action的唯一办法
(2)store.dispatch接收一个action作为参数,将它发送给store来通知 store调用reducer改变state。
(3)dispatch 时,还可以在中间插入副作用操作(网络请求等),其内部会调用中间件进行处理
const action={
type:'ADD_TODO',
payload:'redux原理'
}
store.dispatch(action)
// 或者直接
store.dispatch({
type:'ADD_TODO',
payload: