时间戳

首页 > 解决方案 > 将 useEffect 与 React-redux 一起使用

reactjs - 将 useEffect 与 React-redux 一起使用

问题描述

我有个问题。据我了解，钩子 useEffect 没有运行。我有应该从服务器获取数据的操作。

export const getProducts = () => {
    return dispatch => {
        dispatch(getProductsStarted());

        fetch('https://shopserver.firebaseapp.com/get-products')
            .then(res => {
                dispatch(getProductsSuccess(res.json()));
            })
            .catch(err => {
                dispatch(getProductsFailure(err.message));
            });
    }
}

const getProductsSuccess = todo => ({
    type: "ADD_TODO_SUCCESS",
    payload: {
        ...todo
    }
});

const getProductsStarted = () => ({
    type: "ADD_TODO_STARTED"
});

const getProductsFailure = error => ({
    type: "ADD_TODO_FAILURE",
    payload: {
        error
    }
});

我有一个减速器。

const initialState = {
    loading: false,
    products: [],
    error: null
}

export const ProductReducer = (state = initialState, action) => {
    switch (action.type) {
        case "ADD_TODO_SUCCESS":
            return {
                ...state,
                loading: false,
                error: null,
                todos: [...state.products, action.payload.products]
            }
        case "ADD_TODO_STARTED":
            return {
                ...state,
                loading: true
            }
        case "ADD_TODO_FAILURE":
            return {
                ...state,
                loading: false,
                error: action.payload.error
            }
        default:
            return state
    }
}

我有一个要在其中呈现结果的组件。

import React from 'react';
import { CardItem } from "./cardItem";
import { useSelector } from 'react-redux';
import { useEffect } from 'react';
import { getProducts } from '../Redux/Actions/productAction'

export const ProductCard = () => {

    useEffect(() => {
        getProducts();
        console.log('111111')
    })

    const data = useSelector(state => state.ProductReducer.products);

    return (
        <div>
            {data.map( element =>
                CardItem (element)
            )}
        </div>
    )
}

渲染页面后没有任何反应。ReduxDevTools 显示没有发送操作。请帮我解决它。谢谢你。

标签： reactjsreact-reduxreact-hooks

解决方案

我认为您应该像这样调用异步操作：

import { useDispatch, useSelector } from 'react-redux';

[...]

export const ProductCard = () => {

  const dispatch = useDispatch();

  useEffect(() => {
      // I guess getProducts is an async redux action using redux-thunk
      dispatch(getProducts());
      console.log('111111')
  }, []);

  [...]

}

我假设您只想在组件诞生时加载产品，所以我传递一个空数组作为 useEffect 的第二个参数（https://reactjs.org/docs/hooks-reference.html#useeffect）。

推荐阅读