React-10:Redux状态管理库(数据)

redux

        强调的是,redux 与 react 并没有直接关系,它是一个独立的 JavaScript 状态管理库(数据),如果我们希望中 React 中使用 Redux,需要先安装 react-redux

知识点

        - 状态管理器

        - state 对象

        - reducer 纯函数

        - store 对象

        - action 对象

        - combineReducers 方法

        - react-redux

        - provider 组件

        - connect 方法

        - Redux DevTools extension 工具

        - 中间件 - middleware

        - redux-chunk


状态(数据)管理

        前端应用越来越复杂,要管理和维护的数据也越来越多,为了有效的管理和维护应用中的各种数据,我们必须有一种强大而有效的

        数据管理机制,也称为状态管理机制,Redux 就是解决该问题的

Redux

        Redux 是一个独立的 JavaScript 状态管理库,与非 React 内容之一

                https://www.bootcdn.cn/redux/

核心概念

        理解 Redux 核心几个概念与它们之间的关系

                - state

                - reducer

                - store

                - action

state 对象

        通常我们会把应用中的数据存储到一个对象树(Object Tree) 中进行统一管理,我们把这个对象树称为:state

state 是只读的

        这里需要注意的是,为了保证数据状态的可维护和测试,不推荐直接修改 state 中的原数据

通过纯函数修改 state

        什么是纯函数?

纯函数    (Reducer

        1. 相同的输入永远返回相同的输出

        2. 不修改函数的输入值

        3. 不依赖外部环境状态

        4. 无任何副作用

使用纯函数的好处    (特别单纯,里面没有可变的东西)

        1. 便于测试

        2. 有利重构

Reducer 函数

上面的 todo 函数就是 Reducer 函数

        1. 第一个参数是原 state 对象

        2. Reducer 函数不能修改原 state,而应该返回一个新的 state

        3. 第二参数是一个 action 对象,包含要执行的操作和数据

        4. 如果没有操作匹配,则返回原 state 对象


action 对象

        我们对 state 的修改是通过 reducer 纯函数来进行的,同时通过传入的 action 来执行具体的操作,action 是一个对象

                - type 属性 : 表示要进行操作的动作类型,增删改查……

                - payload属性 : 操作 state 的同时传入的数据

        但是这里需要注意的是,我们不直接去调用 Reducer 函数,而是通过 Store 对象提供的 dispatch 方法来调用

Store 对象

        为了对 state,Reducer,action 进行统一管理和维护,我们需要创建一个 Store 对象

Redux.createStore 方法

let store = Redux.createStore((state, action) => {

  // ...

}, []);

todo

        用户操作数据的 reducer 函数

[    ]

        初始化的 state

        我们也可以使用 es6 的函数参数默认值来对 state 进行初始化

let store = Redux.createStore( (state = [], action) => {

  // ...

} )

getState() 方法

        通过 getState 方法,可以获取 Store 中的 state

dispatch() 方法

        通过 dispatch 方法,可以提交更改,相当于打补丁,可以对store里的数据进行修改


action 创建函数

        action 是一个对象,用来在 dispatch 的时候传递动作和数据,我们在实际业务中可能会中许多不同的地方进行同样的操作,

        这个时候,我们可以创建一个函数用来生成(返回)action


subscribe() 方法    (可以用于react监听)

        可以通过 subscribe 方法注册监听器(类似事件),每次 dispatch action 的时候都会执行监听函数,该方法返回一个函数,

        通过该函数可以取消当前监听器

Redux 工作流


Reducers 分拆与融合

        当一个应用比较复杂的时候,状态数据也会比较多,如果所有状态都是通过一个 Reducer 来进行修改的话,那么这个 Reducer 

        就会变得特别复杂。这个时候,我们就会对这个 Reducer 进行必要的拆分

        我们把上面的 users、items、cart 进行分拆

combineReducers 方法

        该方法的作用是可以把多个 reducer 函数合并成一个 reducer

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章