Redux梳理总结一文通透

第6章：redux

一、redux理解

1. 学习文档

  • 英文文档: https://redux.js.org/
  • 中文文档: http://www.redux.org.cn/
  • Github: https://github.com/reactjs/redux

2. redux是什么

  • redux是一个专门用于做状态管理的JS库(不是react插件库)。

  • 它可以用在react, angular, vue等项目中, 但基本与react配合使用。

  • 作用: 集中式管理react应用中多个组件共享的状态。

  • 安装：npm i redux

3. 什么情况下使用redux

  • 某个组件的状态，需要让其他组件可以随时拿到（共享）。

  • 一个组件需要改变另一个组件的状态（通信）。

  • 总体原则：能不用就不用, 如果不用比较吃力才考虑使用。

4. redux工作流程

二、redux的三个核心概念

1. action

action 是 store 中唯一的数据来源，一般来说，我们会通过调用 store.dispatch 将 action 传到 store，我们需要传递的 action 是一个对象，它必须要有一个 type 值

  • 动作的对象

  • 包含两个属性

    • type：标识属性，值为字符串，唯一，必要属性
    • data：数据类型，值类型任意，可选属性

  • 例子：{ type: 'ADD_STUDENT',data:{name: 'tom',age:18} }

    /* 
    该文件专门为Count组件生成action对象
*/
import { INCREMENT, DECREMENT } from "./constant";
export const createIncrementAction = (data) => ({ type: INCREMENT, data });

export const createDecrementAction = (data) => ({ type: DECREMENT, data });

2. reducer

在 Reducer 中，我们需要指定状态的操作类型，要做怎样的数据更新，因此这个类型是必要的。reducer 会根据 action 的指示，对 state 进行对应的操作，然后返回操作后的 state

  • 用于初始化状态加工状态

  • 根据旧的state和action， 产生新的state的纯函数。

  • 作为createStore的参数

  • 代码：

    /* 
    1.该文件用于创建一个为Count组件服务的reducer,reducer的本质是一个函数
    2.reducer会接受到两个参数，分别为之前的状态(preState),动作对象(action)
*/
import { INCREMENT, DECREMENT } from "./constant";
const initState = 0; // 初始化状态
export default function countReducer(preState = initState, action) {
  //   console.log(preState);
  const { type, data } = action;
  switch (type) {
    case INCREMENT: // 加
      return preState + data;
    case DECREMENT: // 减
      return preState - data;
    default:
      return preState;
  }
}

3. store

store 是 Redux 的核心，可以理解为是 Redux 的数据中台，我们可以将任何我们想要存放的数据放在 store中，在我们需要使用这些数据时，我们可以从中取出相应的数据。因此我们需要先创建一个 store，在 Redux 中可以使用 createStoreAPI 来创建一个store

在生产中，我们需要在 src 目录下的 redux 文件夹中新增一个 store.js 文件，在这个文件中，创建一个 store 对象，并暴露它

  • 将state、action、reducer联系在一起的对象

  • 如何得到此对象?

    import {createStore} from 'redux'
import reducer from './reducers'
const store = createStore(reducer)

  • 此对象的功能?

    • getState(): 得到state

    • dispatch(action): 分发action, 触发reducer调用, 产生新的state

    • subscribe(listener): 注册监听, 当产生了新的state时, 自动调用

  • 代码：

    /* 
    该文件专门用于暴露一个store对象，整个应用只有一个store对象
*/

// 引入createStore
import { legacy_createStore } from "redux";
// 引入为Count组件服务的reducer
import countReducer from "./count_reducer";

// 暴露store
export default legacy_createStore(countReducer);

三、redux核心API

1. createstore(reducer)

作用：创建包含指定reducer的store对象

2. store对象

  • 作用: redux库最核心的管理对象

  • 它内部维护着:

    • state
    • reducer

  • 核心方法:

    • getState()：获取当前时刻的 store
    • dispatch(action)：通过 store 中的 dispatch 方法来派生一个 action 对象给 store
    • subscribe(listener)：subscribe方法，这个方法可以帮助我们订阅 store 的改变，只要 store发生改变，这个方法的回调就会执行

  • 具体编码:

    • store.getState()

    • store.dispatch({type:'INCREMENT', number})

    • store.subscribe(render)

      store.subscribe(() => {
    ReactDOM.render( < App /> , document.getElementById('root'))
})

3. applyMiddleware()

作用：应用上基于redux的中间件(插件库)

import thunk from 'redux-thunk'
export default createStore(countReducer, applyMiddleware(thunk))

4. combineReducers()

作用：合并多个reducer函数

5. redux异步编程

  • redux默认是不能进行异步处理的,

  • 某些时候应用中需要在redux中执行异步任务(ajax, 定时器)

  • 使用异步中间件

    npm install --save redux-thunk

    import thunk from 'redux-thunk'
export default createStore(countReducer, applyMiddleware(thunk))

  • 代码：

    export const createIncrementAsyncAction = (data, time) => {
    // 无需引入 store ，在调用的时候是由 store 调用的
    return (dispatch) => {
        setTimeout(() => {
            dispatch(createIncrementAction(data))
        }, time)
    }
}

  • 注意：异步 action 不是必须要写的，完全可以自己等待异步任务的结果后再去分发同步action

  • 采用 react-thunk 能让异步代码像同步代码一样执行，在 redux 中我们也是可以实现异步的，但是这样我们的代码中会有很多异步的细节，这不是我们想看到的，利用 react-thunk 之类的库，就能让我们只关心我们的业务

6. Redux 三大原则

理解好 Redux 有助于我们更好的理解接下来的 React -Redux

  • 第一个原则

    • 单向数据流：整个 Redux 中，数据流向是单向的

    • UI 组件 —> action —> store —> reducer —> store

  • 第二个原则

    • state 只读：在 Redux 中不能通过直接改变 state ，来控制状态的改变，如果想要改变 state ，则需要触发一次 action。通过 action 执行 reducer

  • 第三个原则

    • 纯函数执行：每一个reducer 都是一个纯函数，不会有任何副作用，返回是一个新的 state，state 改变会触发 store 中的 subscribe###

四、react-redux

在前面我们学习了 Redux ，我们在写案例的时候，也发现了它存在着一些问题，例如组件状态无法公用，每一个状态组件都需要通过订阅来监视，状态更新会影响到全部组件更新，面对着这些问题，React 官方在 redux 基础上提出了 React-Redux 库，专门用来简化react应用中使用redux

安装：npm i react-redux

1. 容器组件和 UI 组件

  • UI组件

    • 只负责 UI 的呈现，不带有任何业务逻辑

    • 通过props接收数据(一般数据和函数)

    • 不使用任何 Redux 的 API

    • 一般保存在components文件夹下

  • 容器组件

    • 负责管理数据和业务逻辑，不负责UI的呈现

    • 使用 Redux 的 API

    • 一般保存在containers文件夹下
      在这里插入图片描述
      要实现容器组件和 UI 组件的连接，我们需要通过 connect 来实现

2. Provider

由于我们的状态可能会被很多组件使用，所以 React-Redux 给我们提供了一个 Provider 组件，可以全局注入 redux 中的 store ，只需要把 Provider 注册在根部组件即可

在 src 目录下的 index.js 文件中，引入 Provider ，直接用 Provider 标签包裹 App 组件，将 store 写在 Provider 中即可。这样我们在 App.jsx 文件中，组件无需手写指定 store ，即可使用 store

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
);

3. connect

在前面我们看到的 react-redux 原理图时，我们会发现容器组件需要给 UI 组件传递状态和方法，并且是通过 props 来传递，看起来很简单。但是，我们会发现容器组件中似乎没有我们平常传递 props 的情形。

因为UI组件是通过**connect()(UI组件)**这样的形式连接。这时候就需要继续研究一下容器组件中的唯一一个函数 connect

  • connect 方法是一个连接器，用于连接容器组件和 UI 组件的高阶函数，它第一次执行时，接收4个参数，这些参数都是可选的，第一次执行时的四个参数：mapStateToProps 、mapDispatchToProps 、mergeProps、options，它执行的执行的结果还是一个函数，第二次执行接收一个 UI 组件参数

  • mapStateToProps：函数

    建立了UI 组件和容器组件间的状态传递

    • 代码：const mapStateToProps = state => ({ count: state })

    • 它接收 state 作为参数，并且返回一个对象，这个对象标识着 UI 组件的同名参数

    • 返回的对象中的 key 就作为传递给 UI 组件 props 的 key，value 就作为 props 的 value

    • UI 组件中直接通过 props 来读取 count 值

    <h1>当前求和为：{this.props.count}</h1>

  • mapDispatchToProps：函数或者对象

    • connect 接受的第二个参数是 mapDispatchToProps，它是用于建立 UI 组件的参数到 store.dispacth 方法的映射

    • 我们可以把参数写成对象形式，在这里面定义 action 执行的方法，例如 jia 执行什么函数，jian 执行什么函数？

    • 我们都可以在这个参数中定义，如下定义了几个方法对应的操作函数

      {
    jia: createIncrementAction,
    jian: createDecrementAction,
    jiaAsync: createIncrementAsyncAction
}

    • 自动调用dispatch

      • 似乎少了点什么，我们在这里调用了函数，创建了 action 对象，但是好像 store 并没有执行 dispatch ，那是不是断了呢？执行不了呢？

      • 其实这里 react-redux 已经帮我们做了优化，当调用 actionCreator 的时候，会立即发送 action 给 store 而不用手动的 dispatch

  • 即connect(mapStateToProps, mapDispatchToProps)(CountUI);

4. react-redux的优化

  • 容器组件和UI组件整合一个文件

  • 无需自己给容器组件传递store，给<App/>包裹一个<Provider store={store}>即可。

  • 使用了react-redux后也不用再自己检测redux中状态的改变了，容器组件可以自动完成这个工作。即不用写一下代码：

    // 监测redux中状态的改变，如果redux的状态发生了改变，那么重新渲染App组件
store.subscribe(() => {
  ReactDOM.render(<App />, document.getElementById("root"));
});

  • mapDispatchToProps也可以简单的写成一个对象

  • 一个组件要和redux“打交道”要经过哪几步？

    • 定义好UI组件—不暴露

    • 引入connect生成一个容器组件，并暴露，写法如下：

      connect(
	state => ({ key : value }), //映射状态
	{ key : xxxxxAction } //映射操作状态的方法
)(UI组件)

    • 在UI组件中通过this.props.xxxxxxx读取和操作状态

5. react-redux数据共享

  • 定义一个Pserson组件，和Count组件通过redux共享数据。

  • 为Person组件编写：reducer、action，配置constant常量。

  • 重点：Person的reducer和Count的Reducer要使用combineReducers进行合并， 合并后的总状态是一个对象！！！

    // 暴露store
export default legacy_createStore(
  combineReducers({ count: countReducer, persons: personReducer }),
  applyMiddleware(thunk)
);

  • 交给store的是总reducer，最后注意在组件中取出状态的时候，记得“取到位”。

    export default connect(
  (state) => ({ personList: state.persons, count: state.count }),
  {
    addPerson: createAddPersonAction,
  }
)(Person);

  • 优化：reducers文件夹中，编写index.js专门用于汇总并暴露所有的reducer

6. react-redux开发者工具的使用

  • 下载Chrome浏览器插件
    地址：Redux-DevTools 浏览器调试工具

  • 在项目中安装redux-devtools-extension

    npm i redux-devtools-extension

  • 在store中进行配置

    // 引入redux-devtools-extension
import { composeWithDevTools } from "redux-devtools-extension";

// 暴露store
export default legacy_createStore(
  combineReducers({ count: countReducer, persons: personReducer }),
  composeWithDevTools(applyMiddleware(thunk))
);

  • 成功配置如下
    在这里插入图片描述

7. 纯函数

  • 如果函数的调用参数相同, 则永远返回相同的结果. 它不依赖于程序执行期间函数外部任何状态或数据的变化, 只依赖于传入的参数

  • 必须遵守以下一些约束

    • 不得改写参数数据

    • 不会产生任何副作用，例如网络请求，输入和输出设备

    • 不能调用Date.now()或者Math.random()等不纯的方法

  • redux的reducer函数必须是一个纯函数

posted @ 2023-01-06 16:30  你就是星光  阅读(34)  评论(0)    收藏  举报