Как вернуть данные в файле редуктора, используя reactsj и typescript?

У меня проблема при загрузке моих данных в редуксе, редуктор потерял мои данные при вызове моего файла, пожалуйста, помогите мне.

мой основной src/index.tsx

import React from 'react'
import {Provider} from 'react-redux'
import ReactDOM from 'react-dom'
import App from './App'
import store from './redux/stores'

ReactDOM.render(
 <Provider store = {store}>
    <App />
 </Provider>,
 document.getElementById('root')
)

мой файл получить данные CampaingHeader

export class CampaingHeader {
private token: any 
private resp_campaing_header: any

constructor(token: any){
    this.token = token
}

/*
   get last campaing for the current user
 */
getLastCampaingHeader = async() => {
    this.resp_campaing_header = await API.get(`campaing-header-last`,{
        headers: {Authorization: `Bearer ${this.token}`}
    })
    return this.resp_campaing_header
 }
}

мои файлы в редуксе

типы

/редукс/типы/campaing.types.tsx

export const SET_CAMPAING = 'SET_CAMPAING'
export const LOADING_CAMPAING = 'LOADING_CAMPAING'
export const SET_DEFAULT_CAMPAING = 'SET_DEFAULT_CAMPAING'
export const SET_ERRORS = 'SET_ERRORS'

редуктор /редукс/редукторы/campaing.reducers.tsx моя проблема в этом файле

import {
SET_DEFAULT_CAMPAING,
SET_CAMPAING,
SET_ERRORS
} from '../types/campaing.types'

const InitCampaingState = {
 answer: false,
 campaing: {}, 
 errors: {}
}

export default function(state = InitCampaingState, action: any) {
 // HERE LOAD MY DATA
 console.info(action.payload)
switch (action.type) {

    // BUT HERE NOT LOADED
    case SET_CAMPAING:
        return {
            ...state,
            answer: true,
            campaing: action.payload // ALWAYS payload is undefined
        }

    default:
        return state // AND RETURN STATE
 }
}

мои действия с файлами /редукс/действия/campaing.actions.tsx

import {
SET_CAMPAING,
SET_ERRORS,
} from '../types/campaing.types'

import {CampaingBody} from '../../userCampaings'


let token = window.sessionStorage.getItem('token')

let CampHeader = new CampaingBody(token)

export const RetrieveCampaing = (campaing_id: number) => (dispatch: any) => {

CampHeader.getRetrieveCBody(campaing_id)
    .then(resp =>{ 

            console.info(resp.data.data)// DATA IS LOADED HERE
            dispatch({
                type: SET_CAMPAING,
                payload: resp.data.data,// HERE LOADED DATA TOO
             })
    }).catch(err =>{
             dispatch({
                type: SET_ERRORS,
                errors: err 
             })
    })
 }

файл, когда получите идентификатор кампании, приведенный ниже код работает хорошо, передайте идентификатор кампании моему коду выше в /redux/actions/campaing.actions.tsx

import React from 'react'
import {connect} from 'react-redux'
// call my actions
import {RetrieveCampaing} from '../../../../redux/actions/campaing.actions' 

const UpdateCampaing: React.FC = (props: any) => {
    React.useEffect(()=>{
     // HERE PASS DATA CORRECTLY
     let ID = GetCampID() 
     props.RetrieveCampaing(ID)
    },[])
    return(....)
}
const mapStateToProps = (state: any) => ({
 campaing: state.campaing
})

const mapActionToProps = {
 RetrieveCampaing   
}
export default connect(mapStateToProps, mapActionToProps)(UpdateCampaing)

и моя проблема здесь, когда я пытаюсь поделиться данными из действий, используя соединение, не работающее.

import React from 'react'
import {connect} from 'react-redux'
type FormData = {
 profile: Iuser
 first_name: string
 last_name: string
 email: string
 cinit: string
}

interface Icampaing {
 campaing: FormData 
}

const Personal: React.FC<Icampaing> = ({campaing})=>{
  React.useEffect(()=>{
    //MY PROBLEM IS HERE NOT LOAD DATA
    console.info('from redux')
    console.info(campaing) // RETURN DATA InitCampaingState, from my type files
  },[])
}

 return(<div>{campaing.cinit}</div>)
}

const mapStateToProps = (state: any) =>({
 campaing: state.campaing
})

export default connect(mapStateToProps)(Personal)

моя проблема в файле REDUCER, потому что данные загружаются, но не возвращают данные.

пожалуйста, помогите мне, я не знаю, где моя ошибка, по-видимому, все работает хорошо, я имею в виду, что загрузка данных в файл действий работает, но когда я вызываю действие в файл de PERSONAL, не работает

лучшие слова.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
1
0
602
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Ваш UseEffect с пустым массивом [] работает как componentDidMount, вызывается только один раз.

Вам нужно добавить campaing в массив, и ваш хук useEffect будет вызываться при каждом изменении реквизита кампании:

const Personal: React.FC<Icampaing> = ({campaing})=>{
  React.useEffect(()=>{
    //MY PROBLEM IS HERE NOT LOAD DATA
    console.info('from redux')
    console.info(campaing) // RETURN DATA InitCampaingState, from my type files
  },[campaing])
}

Другие вопросы по теме