使用Redux和React挂钩获取数据

Question

所以我才刚刚开始学习钩子，并且试图将Redux与它们一起使用。香港专业教育学院一直在尝试redux新的api，但现在我似乎无法获取所需的数据。当我执行console.log（）时，我看到了诺言得到解决，并且在[[PromiseValue]]里面看到了数据，但是如何将其从那里获取到我的组件中。

const Main = ({props}) => {
 const [cloth,setCloth]=useState([])
 const items = useSelector((state) => state);
 const dispatch = useDispatch()
 let getItems = getAllItems(
    () => dispatch({ type: 'GET_ITEMS' }),
    [dispatch]
  )
 console.log(getItems)

这是我的console.log（）

的图片

Answer 1

首先将redux与异步操作一起使用，而您需要使用redux-thunk中间件：

npm i redux-thunk

然后像这样使用它：

import { createStore, applyMiddleware } from 'redux';
const store = createStore(rootReducer, applyMiddleware(thunk));

现在为这里的操作提供一个简单示例：

首先执行操作以获取项目，然后执行操作以在商店中设置项目：

// actions.js

const setItems = (payload)=>({type:SET_ITEMS,payload})

export const fetchItem = ()=>{
return dispatch =>{
axios.get("/items").then(response=> 
dispatch(setItems(response.data))).catch(error=>throw error)
  }
}

// reducer.js

const state = {items:[]}

export default function todosReducer(state = initialState, action) {
  switch (action.type) {
    case "SET_ITEMS":
      return {
        ...state,
        items: payload
      };
    default:
      return state;
  }
}

现在从react组件中，我们获取mount上的项目：

import React,{useEffect} from "react"
import {useDispatch,useSelector} from "react-redux"
import {fetchItems} from "action.js"

const Items = ()=>{
const items= useSelector(state=>state.items)
const dispatch = useDispatch()
useEffect(()=> dispatch(fetchItems()),[])

return items?items.map(item =><p key={item.name}>{item.name}</p>):<p>items not available</p>

希望这是您想要的。