当前位置：首页 > article >正文

Redux与Redux-thunk详解

article 2024/10/20 16:43:09

Redux与Redux-Thunk中间件的工作原理是Redux状态管理库中的核心概念，它们共同协作以实现复杂应用中的状态管理和异步操作。以下是它们的工作原理的详细解释：

Redux的工作原理

Action：
- Action是Redux中的基本单位，它是一个描述要执行什么操作的纯JavaScript对象。
- 每个Action都有一个type属性，该属性是一个字符串，用于唯一标识Action的类型。
- Action还可以包含其他属性，这些属性携带了执行操作所需的数据。
Reducer：
- Reducer是一个纯函数，它接收当前的state和一个Action作为参数，并返回一个新的state。
- Reducer描述了state如何根据Action进行变化。
- 在Redux中，你可以有多个Reducer，它们可以组合在一起，形成一个更大的Reducer函数，以管理应用中的整个state树。
Store：
- Store是Redux的核心，它持有应用的整个state树。
- Store有三个主要方法：getState()、dispatch(action)和subscribe(listener)。
- getState()方法返回当前的state。
- dispatch(action)方法用于发送Action到Reducer，以更新state。
- subscribe(listener)方法允许你注册一个监听器，以便在state发生变化时接收通知。
Dispatch和Action Flow：
- 当你调用store.dispatch(action)时，Redux会将这个Action发送到当前配置的Reducer。
- Reducer根据Action的type和其他属性来计算新的state。
- 然后，Redux会通知所有注册的监听器，state已经更新。

Redux的工作流程

组件通过调用store.dispatch方法派发一个action。
Store接收到action后，将其传递给reducer。
Reducer根据action的type属性和当前状态，计算出新的状态，并返回给Store。
Store将新的状态保存到状态树中，并通知所有订阅了状态变化的组件。
组件根据新的状态重新渲染。

Redux数据流

组件派发action给Store。
Store将action传递给Reducer。
Reducer计算新的状态并返回给Store。
Store更新状态树，并通知所有订阅了状态变化的组件。
组件根据新的状态重新渲染。

Redux-Thunk中间件的工作原理

Redux-Thunk是一个Redux中间件，它允许action creators返回函数而不是仅仅返回action对象。这使得处理异步操作变得容易。

中间件的概念：
- Redux中间件是一种用于扩展Redux功能的机制。
- 它允许你在action被派发到reducer之前或之后执行一些额外的操作。
- 中间件通常由一个函数构成，该函数返回一个函数。这个返回的函数接受store.dispatch和store.getState等参数，然后返回一个新的dispatch函数。

const fetchFoodsList = () => {  
  return async (dispatch) => {  
    // 编写异步逻辑  
    const res = await axios.get('http://localhost:3004/takeaway')  
    // 调用dispatch函数提交action  
    dispatch(setFoodsList(res.data))  
  }  
}

——————————————————————————————————————————————————————————————————————————————————
import React, { useEffect } from 'react';  
import { useDispatch, useSelector } from 'react-redux';  
import { fetchFoodsList } from './actions'; // 假设actions.js是你的action creators文件  
  
const FoodsComponent = () => {  
  const dispatch = useDispatch();  
  const foodsList = useSelector(state => state.foodsList); // 假设你的state结构中有foodsList  
  
  useEffect(() => {  
    dispatch(fetchFoodsList());  
  }, [dispatch]);  
  
  return (  
    <div>  
      {/* 渲染foodsList */}  
    </div>  
  );  
}

Redux-Thunk的工作流程：
- 当你使用Redux-Thunk中间件时，如果dispatch一个函数（而不是一个普通的action对象），Redux-Thunk会拦截这个函数。
- 这个函数接收两个参数：dispatch和getState。dispatch用于在异步操作完成后发送action，getState用于获取当前的state。
- 你可以在这个函数内部执行异步操作，如发起网络请求或定时器操作。
- 异步操作完成后，你可以使用dispatch方法发送一个新的action，以更新Redux store中的状态。
使用Redux-Thunk：
- 要在Redux应用中使用Redux-Thunk中间件，你需要在创建store时将其应用到store上。
- 这通常是通过applyMiddleware函数来实现的。