Redux基础概念

Redux概念

• 是一个专门用于做状态管理的JS库，提供可与预测化的状态管理
• 可以用在多个项目，但基本与react配合使用
• 可以构建一致化的应用，运行在不同环境，并且易于测试
• 作用：集中式管理react应用中的多个组件共享的状态

三大核心

• 单一数据源：整个应用的state被存储在一个object tree中，并且object tree只存在唯一一个store中

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-m3IqxJbX-1658762372408)(C:\Users\Admin\AppData\Roaming\Typora\typora-user-images\image-20220722084714569.png)]

• state是只读的：唯一改变state的方法就是触发action（action是一个用于描述已发生事件的普通对象）

确保了视图和网络请求都不嫩恶搞直接去修改state，相反，他们只能表达想要修改的意图，因为所有的修改都被集中化处理，并且严格按照一个接一个的顺序执行

• 使用纯函数来执行修改：为了描述action如何修改state tree，需要缩写reducers

State —— 状态

就是传递的数据，有以下分类：

• DomainDate：可以简单理解为服务端的数据（获取用户数据
• UI State：决定当前UI展示的状态（弹框显示隐藏
• APP State：APP级别的状态（当前是否请求loading，当前路由信息等可能被多个和组件去使用到的状态

Action —— 事件

action就是数据从应用传到store载体，是store数据的唯一来源，通常可以通过store.dispatch()将action传递到store上

• 本质就是一个JS对象
• 对象内部必须有一个type属性来表示要执行的动作
• 多数情况下，type回事一个字符串常量
• 除type之外，其它随意定义
• 更多喜欢action创建函数
• 只是描述有事情要发生，并没有描述如何去更新state

const sendAction = () => {
    return {
        type: 'send_type',
        value: '我是一个action'
    }
};

module.exports = {sendAction};

Redurer

本质就是函数，用来响应发送过来的action，然后经过处理，把state发送到store

• 需要return返回值，这样store才能接收到数据
• 函数需要两个参数，一个是初始化state，另一个就是action

const initState = {
    value: '默认值'
};

const reducer = (state = initState, action) => {
    console.log("action:", action);
    if (action.type === 'send_type') {
        return Object.assign({}, state, action);
    } else {
        return state
    }
};

module.exports = {reducer};

Store

把action和reducer联系到一起的对象

• 维持应用的state
• 提供getState()方法获取state
• 提供dispatch()方法发送action
• 提供subscribe()方法注册监听
• 提供subscribe()方法来注销监听

import { createStore } form ”redux”

const store = createStore(reducer);

export default store;

React-Redux

• Provider：这个组件能够使你整个app都能获取到store中的数据
• connect：这个方法能够使组件跟store来进行关联

Provider

• 包裹在根组件最外层，使所有子组件都可以拿到State
• Provider接收store作为props，然后通过context往下传递，使得每个子组件都能通过context获得store

connect

• Provider内部组件想要使用到state中的数据，就必须要connect进行一层包裹封装
• connect就是方便组件获取到store中的state

基本使用

• 两个概念
  • UI组件：不能使用任何redux的api，只是负责页面的呈现和交付等
  • 容器组件：负责和redux通信，将结果交给UI组件
• 如何创建容器组件
  • 靠react-readux的connect函数
  • connect(mapStateToProps, mapDispatchToProps)
    • mapStateToProps：映射状态，返回值是一个对象
    • mapDispatchToProps：映射操作状态的方法，返回值是一个对象
• 备注：容器组件中的store是靠props传进去的，而不是再容器组件中直接引入的
• 备注：mapDispatchToProps也可以一个对象