Как действие связалось с редуктором, чтобы изменить состояние объекта

Извините, это может быть глупый вопрос, но я хочу знать, что у меня есть редукционный магазин, сначала позвольте мне объяснить поток данных там. Данные сохраняются в состоянии глобального уровня, которое у меня есть в моем store.js, которое было объявлено в моем productReducer.js. Там я определяю оператор переключения и там я изменяю состояние продукта.

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.info("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})
}

Позвольте мне подытожить мой вопрос, когда мне нужно обновить состояние из внешнего интерфейса, я вызываю действие, но нет никакого способа, чтобы действие и редуктор были связаны вместе, как состояние продукта изменяется в моем случае

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
0
20
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Действие

Действие — это простой объект JavaScript с полем типа. Вы можете думать о действии как о событии, описывающем что-то, что произошло в приложении.

Редуктор

Вы можете думать о редюсере как о прослушивателе событий, который обрабатывает события на основе полученного типа действия (события).

Используя отправлять(), вы отправляете событие, а затем в логике редуктора происходит следующее:

  • Проверьте, заботится ли редьюсер об этом действии.
    • Если это так, сделайте копию состояния, обновите копию новыми значениями и верните ее.
  • В противном случае вернуть существующее состояние без изменений

Если вас интересует больше, то, пожалуйста, загляните в официальный редукс документация, там действительно есть все, что вам нужно.

Ответ принят как подходящий

Чтобы ответить на ваш вопрос «как действия связываются с редуктором, чтобы изменить состояние объекта?»:

Общая настройка магазина избыточности позволяет это сделать, особенно то, как вы зарегистрировали свой productReducer.

Давайте рассмотрим типичный поток, чтобы проиллюстрировать, как все связано:

  1. Где-то в компоненте React взаимодействие с пользователем (например, нажатие кнопки) или что-то автоматическое отправляет асинхронное getProduct() действие. Это возможно, потому что getProduct либо является реквизитом компонента (Redux' connect API), либо вы используете useDispatch хук.
  2. Настройка магазина знает, что PRODUCT_LIST_SUCCESS обрабатывается вашим productReducer. Мы проходим через оператор switch, и теперь state.product.product содержит массив продуктов (кстати, будьте осторожны с именами, множественное и единственное число).
  3. Любой компонент React, заинтересованный в state.product.product, теперь уведомляется об изменении состояния. Они получают уведомления, потому что либо connect API (mapStateToProps), либо useSelector соединяет состояние с подключенным компонентом React. Продукты теперь можно (повторно) визуализировать, щелкнуть по ним и т. д.

Другие вопросы по теме