action 如何联系 reducer 来改变对象的状态

Question

对不起，这可能是个愚蠢的问题，但我想先知道我有 redux store 让我解释一下那里的数据流数据存储在我的 store.js 中的全局级别状态，该状态已在我的 productReducer.js 中声明我定义了一个 switch 语句并更改了产品的状态

productReducer.js

我的代码在这里

import { 
    PRODUCT_LIST_SUCCESS, 
    PRODUCT_LIST_REQUEST,
    PRODUCT_LIST_FAIL,
    CLEAR_ERROR
} from '../constants/productConst'

export const productReducer = (state  ={product:[]},action)=>{
    switch (action.type) {
        case PRODUCT_LIST_REQUEST:
            return{
                laoding: true,
                product:[],
            }
        case PRODUCT_LIST_SUCCESS:
            return{
                laoding: false,
                product:action.payload.products,
                productsCount:action.payload.productCount,
            }
        case PRODUCT_LIST_FAIL:
            return{
                laoding: false,
                error:action.payload,
            }
        case CLEAR_ERROR:
            return{
                ...state,
                error:null
            }
        default:
            return {
                ...state,
            }
    }
}

我有行动productAction.js

import axios from 'axios'


import { 
    PRODUCT_LIST_SUCCESS, 
    PRODUCT_LIST_REQUEST,
    PRODUCT_LIST_FAIL,
    CLEAR_ERROR
} from '../constants/productConst'

export const getProduct = () => async (dispatch) =>{
    console.log("Been executed at the action")
    try {
        dispatch({type:PRODUCT_LIST_REQUEST})
        const {data} = await axios.get("api/v1/products")
        dispatch({
            type:PRODUCT_LIST_SUCCESS,
            payload:data,
        })
    } catch (error) {
        dispatch({
            type:PRODUCT_LIST_FAIL,
            payload:error.response.data.message,
        })
    }
}

export const clearError =() =>async (dispatch)=>{
    dispatch({type:CLEAR_ERROR})
}

让我总结一下我的问题，当我需要从前端更新状态时，我调用了动作，但是动作和减速器无法连接在一起，在我的情况下产品状态是如何改变的

Answer 1

动作

动作是具有类型字段的普通 JavaScript 对象。您可以将操作视为描述应用程序中发生的事情的事件。

减速器

您可以将 reducer 视为事件侦听器，它根据接收到的操作（事件）类型处理事件。

通过使用 dispatch() 您正在调度事件，然后在 reducer 逻辑中出现以下内容：

检查减速器是否关心这个动作
- 如果是，复制状态，用新值更新副本，return它
否则，return现有状态不变

如果您对更多感兴趣，请查看官方 redux documentation，这里真的有您需要的一切。

Answer 2

回答您的问题“动作如何联系减速器以更改对象的状态？”：

Redux 商店的整体设置可以实现这一点，尤其是您注册 productReducer 的方式。

让我们通过典型的流程来说明一切是如何连接的：

在 React 组件中的某处，user-interaction（例如按钮单击）或自动调度异步 getProduct() 操作。这是可能的，因为 getProduct 要么是组件的一个道具（Redux' connect API），要么你正在使用 useDispatch 钩子。
商店设置知道 PRODUCT_LIST_SUCCESS 由您的 productReducer 处理。我们通过 switch 语句，现在 state.product.product 包含一系列产品（顺便说一句，小心命名，复数与单数）。
任何对 state.product.product 感兴趣的 React 组件现在都会收到状态已更改的通知。他们收到通知是因为 connect API (mapStateToProps) 或 useSelector 将状态与已安装的 React 组件连接起来。现在可以（重新）呈现或点击产品等。

action 如何联系 reducer 来改变对象的状态

how action contacted the reducer to change the state of the object

reactjs

redux

react-redux