Извините, это может быть глупый вопрос, но я хочу знать, что у меня есть редукционный магазин, сначала позвольте мне объяснить поток данных там.
Данные сохраняются в состоянии глобального уровня, которое у меня есть в моем 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})
}
Позвольте мне подытожить мой вопрос, когда мне нужно обновить состояние из внешнего интерфейса, я вызываю действие, но нет никакого способа, чтобы действие и редуктор были связаны вместе, как состояние продукта изменяется в моем случае
Действие
Действие — это простой объект JavaScript с полем типа. Вы можете думать о действии как о событии, описывающем что-то, что произошло в приложении.
Редуктор
Вы можете думать о редюсере как о прослушивателе событий, который обрабатывает события на основе полученного типа действия (события).
Используя отправлять(), вы отправляете событие, а затем в логике редуктора происходит следующее:
Если вас интересует больше, то, пожалуйста, загляните в официальный редукс документация, там действительно есть все, что вам нужно.
Чтобы ответить на ваш вопрос «как действия связываются с редуктором, чтобы изменить состояние объекта?»:
Общая настройка магазина избыточности позволяет это сделать, особенно то, как вы зарегистрировали свой productReducer
.
Давайте рассмотрим типичный поток, чтобы проиллюстрировать, как все связано:
getProduct()
действие. Это возможно, потому что getProduct
либо является реквизитом компонента (Redux' connect
API), либо вы используете useDispatch
хук.PRODUCT_LIST_SUCCESS
обрабатывается вашим productReducer
. Мы проходим через оператор switch, и теперь state.product.product
содержит массив продуктов (кстати, будьте осторожны с именами, множественное и единственное число).state.product.product
, теперь уведомляется об изменении состояния. Они получают уведомления, потому что либо connect
API (mapStateToProps
), либо useSelector
соединяет состояние с подключенным компонентом React. Продукты теперь можно (повторно) визуализировать, щелкнуть по ним и т. д.