mapStateToProps 将数据传递给道具

Posted 2023-02-22

【中文标题】mapStateToProps 将数据传递给道具

【英文标题】：mapStateToProps to passing data to props

【发布时间】：2018-11-04 16:39:38

【问题描述】：

我正在构建一个员工轮换系统，我有一个 mapStateToProps 函数，但是道具 rotaData 以未定义的形式返回 这是我的行动：

import settings from '../../aws-config.js';
import Amplify,  Auth, API  from 'aws-amplify';
export const GET_STAFF_SHIFTS = 'get_staff_shifts';
export function getShifts() 
console.log('Fetching list of shifts for user...');

const request = API.get("StaffAPI", "/shifts", 
headers: 
       'Accept': 'application/json',
       'Content-Type': 'application/json',
   
);
return 
  type : GET_STAFF_SHIFTS,
  payload : request
 

这是我的减速器

import _ from "lodash"
import  GET_STAFF_SHIFTS from '../actions';

export default function(state = , action) 
switch(action.type)
case GET_STAFF_SHIFTS:
    return  ...state, rotaData: action.payload.data ;
 

这是我的 mapStateToProps 函数

function mapStateToProps(state)
return rotaData: state.rotaData ;

export default connect(mapStateToProps, getShifts: getShifts) 
(StaffRota);

但是在我的 StaffRota 类中，当控制台记录 this.props 时，rotaData 返回 undefined。

有什么帮助吗？

【参考方案1】：

API.get() 是不同步的，而是返回一个 Promise，因此您需要等待它完成，然后在加载完成时调度另一个动作。您需要安装redux-thunk 才能调度函数。

export const getShifts = () => dispatch => 
    const request = API.get("StaffAPI", "/shifts", 
        headers: 
               'Accept': 'application/json',
               'Content-Type': 'application/json',
        
    )
    .then(response => 
        dispatch(type: 'SHIFTS_LOAD_SUCCESS', response)
    )
    .catch(err => 
        dispatch(type: 'SHIFTS_LOAD_FAIL')
    )

然后您可以在包含响应的减速器中处理SHIFTS_LOAD_SUCCESS。然后在您的mapDispatchToProps 中，您可以将getShifts 函数作为道具提供给您的组件：

export default connect(mapStateToProps, dispatch => loadAllShifts: dispatch(getShifts()))(...)

【讨论】：

谢谢你，但是我得到一个错误，指出动作必须是普通对象。使用自定义中间件进行异步操作。

是的，您需要安装 redux-thunk 才能调度异步操作（链接上有关于如何将其添加为中间件的说明）

还有might be worth to read

不好意思问，但我不知道我要做什么？我已经安装了 redux thunk

@SamuelGray 1. 更改您的getShifts 就像我上面的答案一样 2. 编写一个处理SHIFTS_LOAD_SUCCESS 的减速器并将其写入状态下的某个位置 3. 编写mapStateToProps 以提取来自状态的数据 4. 编写 mapDispatchToProps 以使您的 getShifts 可用作组件的 loadAllShifts 道具 5. 在组件中的某处调用 loadAllShifts。然后，您的组件将使用数据作为道具重新渲染。

【参考方案2】：

API.get 返回一个Promise，因此您需要改用解析结果。

您还需要使用像 redux-thunk 这样的库来延迟操作的调度，直到 API 解析。

const getShifts = () => dispatch =>
  API.get(...).then(response => dispatch(
    type: GET_STAFF_SHIFTS,
    payload: response,
  ))