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

Question

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

因此，我无法访问实际 Axios 请求的内容（即使它始终是列表的最后一项）。仅当我执行 {this.props.address.slice(-1)[0].href} 时，我才能访问返回的 JSON 的项目。我想这不是应该的样子，所以我一定是做错了什么。

我是 React 的新手，因此我不太熟悉使用 Redux 的不同方式。但是，当我使用 reduxjs/toolkit 中的 createSlice 时，我已将其缩减为初始状态下发生的事情（我以前没有使用过的东西，但我正在使用的主题目前正在使用它，所以我正在尝试复制他们的设置方式）。

我附上了下面的代码，如果有任何引导我走向正确方向的意见，我将不胜感激。我的文件比这些多得多 - 但我很确定这三个文件可以解决问题。

Research.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);

addressSlice.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;
    },
  },
});

addressAction.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 来避免渲染，并设置良好的默认值 always.

编辑后的答案：更加清晰。

我找不到任何记录 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].

作为新数组的第一个元素访问它

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

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

React Redux returning list of props [Metronic Theme]

javascript

reactjs

redux

redux-saga

react-redux