我的组件是这样的:...我的组件是这样的:...。
const handleGetProduts = async() => {
await props.getProducts()
setResults(props.results)
console.log('props after getProducts: ', props)
}
...而reducer是。
const initialState= {
results: [],
products: [],
}
export default (state = initialState, action) => {
console.log(action)
switch (action.type) {
case 'GET_PRODUCTS_FULFILLED':
return {
...state, results: action.payload.results
}
default:
return state
}
}
export const getProducts = () => async dispatch => {
console.log('Enter getProducts')
const result = await dispatch({
type: 'GET_PRODUCTS',
payload: fetch('http://server.domaina.com').then(response => response.json())
});
return result;
};
谢谢你
在功能组件中,你可以使用 使用选择器 钩子来从商店获取状态。
然而 1. console.log('props after getProducts: ', props)
不会打印最新产品 马上 因为状态更新是异步的,而且你是在一个处理程序中记录的。要查看更新的产品,请将控制台日志放在功能组件的某个地方。
handleGetProduts
不需要异步,也不需要等待 props.getProducts()
.import React from 'react'
import { useSelector } from 'react-redux'
**useSelector ex**
export const ProductsComponent = () => {
const products = useSelector(state => state.products)
return <div>{products[0].name}</div>
}