องค์ประกอบ React ไม่อัปเดตหลังจากการเปลี่ยนแปลงร้านค้า Redux

ฉันกำลังพยายามดึงข้อมูลบางส่วนในส่วนประกอบการตอบสนองโดยใช้ useEffect hook หลังจากการเรนเดอร์ครั้งแรก fetchItems() จะได้รับไอเท็มและอัพเดตร้านค้า อย่างไรก็ตาม items ยังคงเป็นออบเจ็กต์ว่างเปล่าแม้ว่าร้านค้าจะอัปเดตแล้วก็ตาม

ฉันอาจจะใช้ useEffects ผิด คุณใช้ Redux กับ useEffects อย่างไร ฉันต้องการตั้งค่าสถานะการโหลดสำหรับส่วนประกอบ แต่เนื่องจากส่วนประกอบจะส่งเฉพาะการดำเนินการเพื่อดึงรายการ (แทนที่จะเรียก API โดยตรง) จึงไม่ทราบว่าเมื่อใดที่ข้อมูลถูกดึงออกมาและร้านค้าได้รับการอัปเดตเพื่อให้สามารถดึงได้ .

ใครช่วยกรุณาช่วยหาวิธีตรวจสอบให้แน่ใจว่าวัตถุ items ได้รับการอัปเดตหลังจากการดึงข้อมูล Saga และการอัปเดตร้านค้าในภายหลัง

import React, { useState, useEffect } from "react";
import { connect } from 'react-redux';
import { useParams } from "react-router-dom";

const ItemComponent = ({ item, fetchItem }) => {
    const { itemId } = useParams();
    
    const [isLoading, setIsLoading] = useState(false);

    useEffect(() => {
        setIsLoading(true)
        fetchItem(itemId)
        setIsLoading(false)
    }, []);
    
    console.log(item) // gives empty object even after the fetch and store update
}

const mapStateToProps = (state) => {
  return {
    item: state.item
  }
}

const mapDispatchToProps = (dispatch) => {
    return {
        fetchItem: (itemId) => { dispatch(fetchItemActionCreator(itemId)) }
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(ItemComponent);
  • fetchItemActionCreator คือผู้สร้างการกระทำที่สร้างการกระทำที่จะจัดส่ง
  • ตัวลดและเทพนิยายของฉันทำงานได้ดีเพราะฉันเห็นการดำเนินการของร้านค้าและการอัปเดตในคอนโซล
  • ถ้าฉันส่งวัตถุ items ไปยังอาร์เรย์การขึ้นต่อกันสำหรับ useEffect จะมีการวนซ้ำไม่สิ้นสุดและเพจจะแสดงผลซ้ำต่อไป

ลด:

const itemReducer = (state={}, { type, payload }) => { 
  switch(type) { 
  case ITEM_GET_SUCCESS: 
    return {...state, ...payload} 
  default: return state 
  } 
}

fetchItemActionCreator:

import { createAction } from '@reduxjs/toolkit';

export const fetchItemActionCreator = createAction(ITEM_GET_PENDING);

ขอบคุณล่วงหน้า!


redux react-redux use-effect redux-saga
person Bovojon A    schedule 12.11.2020    source แหล่งที่มา
comment
คุณช่วยแบ่งปัน item reducer และ และ fetchItemActionCreator ของคุณได้ไหม   -  person Hend El-Sahli    schedule 12.11.2020
comment
const ItemComponent = ({ item , fetchItem}) => { นั่นเป็นเรื่องบังเอิญใช่ไหม?   -  person Hend El-Sahli    schedule 12.11.2020
comment
เพิ่งเพิ่มตัวลดและผู้สร้างการกระทำ และใช่ fetchItem ไม่ได้ถูกเพิ่มที่นี่ในคำถามโดยไม่ได้ตั้งใจ   -  person Bovojon A    schedule 13.11.2020

คำตอบ (1)


arrow_upward
1
arrow_downward

ฉันต้องการตั้งค่าสถานะการโหลดสำหรับส่วนประกอบ

/** Action */
const getItem = () => dispatch => {
  dispatch({ type: 'GET_ITEM_START' });

  axios
    .get('your api end point')
    .then(res => {
      const item = res.data;
      dispatch({
        type: 'GET_ITEM_SUCCESS',
        payload: {
          item,
        },
      });
    })
    .catch(error => {
      dispatch({
        type: 'GET_ITEM_FAIL',
        payload: error,
      });
    });
};

/** Reducer */
const INITIAL_STATE = {
  item: null,
  error: '',
  loading: false,
};

const itemReducer = (state = INITIAL_STATE, { type, payload }) => {
  switch (type) {
    case 'GET_ITEM_START':
      return { ...state, error: '', loading: true };

    case 'GET_ITEM_SUCCESS':
      return { ...state, ...payload, loading: false };

    case 'GET_ITEM_FAIL':
      return { ...state, error: payload, loading: false };

    default:
      return state;
  }
};

จากนั้นคุณสามารถจัดการสถานะการโหลดในส่วนประกอบของคุณได้

  const ItemComponent = ({ fetchItem, item, loading, error }) => {
    /** ... */
    /**
      Check for loading and show a spinner or anything like that
    */

    useEffect(() => {
      fetchItem(itemId);
    }, []);

    if (loading) return <ActivityIndicator />;
    if (item) return <View>{/* renderItem */}</View>;
    return null;
  };
person Hend El-Sahli    schedule 12.11.2020
comment
ขอบคุณสำหรับการแบ่งปัน @Hend El-Sahli นี้ มีวิธีการทำเช่นนี้กับ useEffect หรือไม่ คุณจำเป็นต้องดึงข้อมูลในส่วนประกอบเองหรือไม่? - person Bovojon A; 13.11.2020
comment
ขอบคุณสำหรับการอัปเดต @Hend El-Sahli ฉันสงสัยว่าฉันไม่จำเป็นต้องส่ง itemId ไปยังอาร์เรย์การพึ่งพาของ useEffect หรือไม่ - person Bovojon A; 16.11.2020