React Redux 返回道具列表 [Metronic Theme]

Question

我有一个关于 React-Redux 在初始化页面时返回特定于 redux 的 propx 列表的问题。 如果我控制台.log this.props.地址(我正在获取的内容(，我会得到一个(4) [true, null, false, {…}]列表(最后一项最终是我需要的(。

出于这个原因，我在访问实际 Axios 请求的内容时遇到问题(即使它始终是列表的最后一项(。只有当我这样做{this.props.address.slice(-1)[0].href}我才能访问返回的 JSON 的项目。我想这不是它应该的样子，所以我一定做错了什么。

我对 React 很陌生，因此我对使用 Redux 的不同方式并不熟悉。但是，当我使用 createSlice fromreduxjs/toolkit时，我已经将其缩减为初始状态下发生的事情(我以前从未使用过的东西，但它目前被我正在使用的主题使用，所以我正在尝试复制他们设置它的方式(。

我已经附上了下面的代码，并希望任何输入引导我朝着正确的方向前进。 我有比这些更多的文件 - 但我很确定这三个文件可以解决这个问题。

研究.js

import React from "react";
import { connect } from "react-redux";
import { fetchAddress } from "./_redux/addressActions";
class Research extends React.Component {
componentDidMount() {
this.props.fetchAddress(this.props.match.params.id);
}
render() {
console.log(this.props.address);
return <h1>{this.props.address.slice(-1)[0].href}</h1>;
}
}
const mapStateToProps = (state) => {
return {
address: Object.values(state.address),
};
};
export default connect(mapStateToProps, { fetchAddress })(Research);

地址切片.js

import { createSlice } from "@reduxjs/toolkit";
const initialAddressState = {
initialState: true,
};
export const callTypes = {
list: "list",
action: "action",
};
export const addressSlice = createSlice({
name: "addresses",
initialState: initialAddressState,
reducers: {
addressFetched: (state, action) => {
state.actionsLoading = false;
state.address = action.payload.address;
state.error = null;
},
},
});

地址操作.js

import * as requestFromServer from "./addressCrud";
import { addressSlice, callTypes } from "./addressSlice";
const { actions } = addressSlice;
export const fetchAddress = (id) => (dispatch) => {
if (!id) {
return dispatch(actions.addressFetched({ address: undefined }));
}
dispatch(actions.startCall({ callType: callTypes.action }));
return requestFromServer
.getAddress(id)
.then((response) => {
const address = response.data;
dispatch(actions.addressFetched({ address: address }));
})
.catch((error) => {
error.clientMessage = "Can't find address";
dispatch(actions.catchError({ error, callType: callTypes.action }));
});
};

Answer 1

编辑 答案：根据下面的评论，似乎确实有一些内置的加载状态管理，带有actionsLoading和actions.startCall。

应该能够使用this.props.actionsLoading来避免渲染，并且始终设置良好的默认值。

编辑答案：更清晰。

我找不到任何处理应用程序加载状态的记录 redux 工具包。如果您自己设置该加载状态类似于他们在文档 https://redux-toolkit.js.org/usage/usage-guide#asynchronous-logic-and-data-fetching 上设置该状态，该怎么办？

需要处理减速器中的负载。

export const addressSlice = createSlice({
name: "addresses",
initialState: initialAddressState,
reducers: {
addressLoading: (state, action) => {
state.loading = true;
},
addressFetched: (state, action) => {
if(state.loading) {
state.loading = false;
state.address = action.payload.address;
state.error = null;
}
},
},
});

然后，确保调度事件以指示加载已开始。

dispatch(actions.addressLoading());
return requestFromServer
.getAddress(id)
.then((response) => {
const address = response.data;
dispatch(actions.addressFetched({ address: address }));
})

我也总是在我的初始状态中包含合理的默认值。

const initialAddressState = {
loading: false,
error: null,
address: null
};

最后一步是在加载或没有数据时避免渲染。也有很多方法可以做到这一点。如果不看到应用程序的其余部分，就很难知道您的最佳选择是什么。

render() {
console.log(this.props.address);
if(this.props.loading || this.props.address === null) return null;
return <h1>{this.props.address.href}</h1>;
}

希望这更接近问题。

编辑答案：我最初误解了这个问题。

const mapStateToProps = (state) => {
return {
address: Object.values(state.address),
};
};

这将在state.address对象之外创建一个值数组。因此，在本例中，对象如下所示：

const obj = { first: true, second: false };
const oops = Object.values(obj);
console.log(oops); // [true, false]

我不确定您希望数据如何显示，但是如果您想要地址对象，请使用address: state.address分配它。

原答案：通常在 JavaScript 中，我们访问像这样的数组的最后一项。您可以通过创建一个指向地址的局部变量来缩短它。

const address = this.props.address;
address[address.length - 1];

在您的示例中，您将数组的最后一个元素(slice 允许您从末尾回到带有负数的中间(并将其切成自己的数组。之后，您可以使用 [0] 访问它作为新数组的第一个元素。

我认为根据您想要的描述，进行最后一项访问是合理的。