调度后立即反应 Redux Store 值

Posted 2023-02-22

【中文标题】调度后立即反应 Redux Store 值

【英文标题】：React Redux Store values immediatly after dispatch

【发布时间】：2020-09-29 22:27:09

【问题描述】：

我不可能在 redux thunk 中调度后立即获取存储值？ 我的组件是这样的： ...

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;
;

谢谢

【问题讨论】：

它可能会起作用，但这样一来，您就必须担心组件中的操作。此外，您的减速器将不可重复使用。更好的方法是使用 Action Creator。

【参考方案1】：

在功能组件中，您可以使用useSelector钩子从存储中获取状态。

但是 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>