未使用API​​数据触发React-Redux componentWillReceiveProps [英] React-Redux componentWillReceiveProps not triggered using api data

问题描述

我不确定这是否是正确的做事方式，或者甚至可能，所以在这里是我的问题.

I'm not sure if this is the correct way to do things, or if it's even possible, therefore my question here.

我在我的项目中使用react-redux，redux-thunk，json-server(用于伪数据)和打字稿.通过1个api调用，我使用应用程序的所有数据更新了数据"缩减器.此数据通过CombineReducers与其他reducer一起使用: Redux树

I'm using react-redux, redux-thunk, json-server (for dummy data) and typescript in my project. With 1 api call I update the 'data' reducer with all the data for my application. This data is used together with other reducers through combineReducers: Redux tree

我想做的是将data.labels作为prop映射到我的组件中.一旦整个api调用完成，并因此填充了data.labels，我想将此数据显示给我的前端.但是我注意到，当我的数据api调用完成时，根本不会触发componentWillReceiveProps.如果我将整个数据"属性而不是"data.labels"附加到我的组件，它就会更新.

What I'd like to do is map data.labels as prop into my component. Once the whole api call finishes, and data.labels is therefore filled, I would like to show this data to my front-end. I have however noticed that the componentWillReceiveProps is not triggered at all when my data api call is finished. It does update if I attach the whole 'data' prop to my component, instead of 'data.labels'.

减速器:

    case Actions.RECEIVE:
        return {
            ...state,
            labels: action.payload.labels,
            defaultLinks: action.payload.defaultLinks,
            customLinks: action.payload.customLinks
        };

组件:

function mapStateToProps(state: any) {
return {
    labels: state.data.labels, // This will not trigger componentWillReceiveProps

function mapStateToProps(state: any) {
return {
    data: state.data, // This will trigger componentWillReceiveProps

关于在不注入整个数据对象的情况下如何使它起作用的任何提示?

Any tips on how to get this to work without injecting the whole data object as prop?

修改

如果使用完整的数据"，则在记录数据时会得到一个空标签数组.在获取数据之前，在componentWillReceiveProps中使用标签.成功获取数据后，我的日志显示了x个标签数量的数组.

In the case of using te full 'data', I get an empty array of labels when logging data.labels in componentWillReceiveProps before the data has been fetched. After the data has been successfully fetched, my log shows an array of x amount of labels.

以下是我使用的接口: 数据接口(redux存储内的结构，以数据"为父):

Below are the interfaces I use: Data interface (structure inside redux store, with 'data' as parent):

interface Data {
  labels: Label[];
  defaultLinks: DefaultLink[];
  customLinks: CustomLink[];
  request: boolean;
  failure: boolean;
}

组件中使用的道具界面:

Props interface used in my component:

interface Props {
  labels: Label[];
  ...; // Other stuff
}

推荐答案

您可能正在寻找选择器模式: github. com/reactjs/reselect#reselect

You may be looking for the selector pattern: gist.github.com/abhiaiyer91/aaf6e325cf7fc5fd5ebc70192a1fa170 often used in combination with reselect: github.com/reactjs/reselect#reselect

主要优点是，您可以将状态的形状与道具的形状分开.

The primary advantage is you decouple the shape of your state from the shape of your props.

这篇关于未使用API​​数据触发React-Redux componentWillReceiveProps的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！