** ProductDetailsScreen.js >>>这是我的代码,我从Redux商店获得了产品列表,但是在初始化产品详细信息时遇到了问题。**
export default function ProductDetilsScreen(props) {
const dispatch = useDispatch();
const productId = props.match.params.id;
const productDetails = useSelector((state) => state.productDetails);
const { loading, error, product } = productDetails;
useEffect(() => {
dispatch(detailsProduct(productId));
}, [dispatch, productId]);
** productActions.js >>这是我的代码,我从Redux商店获得了产品列表,但是在初始化产品详细信息时遇到了问题。**
export const detailsProduct = (productId) => async (dispatch) => {
dispatch({
type: PRODUCT_DETAILS_REUEST,
payload: productId,
});
try {
const { data } = await Axios.get(`/api/products/${productId}`);
dispatch({
type: PRODUCT_DETAILS_SUCCESS,
payload: data,
});
} catch (error) {
dispatch({
type: PRODUCT_DETAILS_FAIL,
payload:
error.response && error.response.data.message
? error.response.data.message
: error.message,
});
}
};
** productReducer.js >>>这是我的代码,我从Redux商店获得了产品列表,但是在初始化产品详细信息时遇到了问题。**
export const productDetailsReducer = (
state = { product: {}, loading: true },
action
) => {
switch (action.type) {
case PRODUCT_DETAILS_REUEST:
return { loading: true };
case PRODUCT_DETAILS_SUCCESS:
return { loading: false, product: action.payload };
case PRODUCT_DETAILS_FAIL:
return { loading: false, error: action.payload };
default:
return state;
}
};
** Store.js >>>这是我的代码,我从Redux商店获得了产品列表,但是在初始化产品详细信息时遇到了问题。**
import { applyMiddleware, combineReducers, compose, createStore } from "redux";
import thunk from "redux-thunk";
import { productDetailsReducer, productListReducer } from "./productReducers";
const initialState = {};
const reducer = combineReducers({
productList: productListReducer,
productDetils: productDetailsReducer,
});
const composeEnhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(
reducer,
initialState,
composeEnhancer(applyMiddleware(thunk))
);
export default store;
似乎这里有一个错字可能会引起问题。
// productDetils in Store.js file
const reducer = combineReducers({
productList: productListReducer,
productDetils: productDetailsReducer,
});
// productDetails in ProductDetailsScreen.js file
const productDetails = useSelector((state) => state.productDetails);
const { loading, error, product } = productDetails;
尝试纠正此粗心的错误。
除此之外,似乎没有什么异常。您的初始状态为productDetails
,state = { product: {}, loading: true }
似乎是正确的。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句