javascript - 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 的不同方式并不熟悉。但是，当我使用 createSlice from 时，我已将其缩减为初始状态下发生的reduxjs/toolkit事情（我以前没有使用过的东西，但它目前被我正在使用的主题使用，所以我试图复制他们设置的方式）。

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

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

地址切片.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 }));
    });
};

标签： javascriptreactjsreduxreact-reduxredux-saga

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];

在您的示例中，您正在获取数组的最后一个元素（切片让您从末端回到负数的中间）并将其切片到自己的数组中。之后，您可以使用 [0] 作为该新数组的第一个元素访问它。

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