reactjs - 如何使用 reactsj 和 typescript 在 reducer 文件中返回数据?
问题描述
我在 redux 中加载数据时遇到问题,reducer 在调用我的文件时丢失了我的数据,请帮助我。
我的主要 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
}
}
我在 redux 中的文件
类型
/redux/types/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'
减速器 /redux/reducers/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
}
}
我的文件操作 /redux/actions/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
})
})
}
获取campaing ID时的文件,下面的代码运行良好,将ID campaing传递给我上面的/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 动作文件中工作,但是当我将动作调用到 de PERSONAL 文件中时不起作用
最好的词。
解决方案
你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])
}
推荐阅读
- powershell - 两个相同的属性与预期不匹配
- c# - 在 C# 中使用 GDAL 将 CSV 转换为 Geotiff
- angular - UrlMatcher 中的 Angular 6 依赖注入
- mongodb - 聚合查询和 MongoRepository
- scala - 使用一种热编码和矢量汇编器与矢量索引器解决分类特征
- linux - 使用 sed 逐行提取 xml 标记的多个参数
- matlab - 函数可以知道它是否在 Matlab 发布调用中吗?
- spring - 终止 @Scheduled Spring Batch 作业
- google-sheets - 在谷歌电子表格中结合 VLOOKUP 和 IF
- windows - 语言中立的 FileSystemAccessRule