延迟加载来自规范化Redux存储的引用-Java 学习之路

呦！我正在使用Redux和Normalizr . 我正在使用的API会发送如下所示的对象：

{
  name: 'Foo',
  type: 'ABCD-EFGH-IJKL-MNOP'
}

或者像这样

{
  name: 'Foo2',
  children: [
    'ABCD-EFGH-IJKL-MNOP',
    'QRST-UVWX-YZAB-CDEF'
  ]
}

我希望能够在从状态（ mapStateToProps ）访问上述对象时异步获取这些相关实体（ type 和 children ） . 不幸的是，这似乎与Redux方式不相符，因为 mapStateToProps 不是调用操作的正确位置 . 这个案例有一个明显的解决方案，我忽略了（除了预取我的所有数据）？

1 回答

不确定我是否正确理解了您的用例，但是如果您想获取数据，一种简单的常见方法是从React组件触发它：

var Component = React.createClass({
    componentDidMount: function() {
        if (!this.props.myObject) {
            dispatch(actions.loadObject(this.props.myObjectId));
        }
    },

    render: function() {
        const heading = this.props.myObject ?
            'My object name is ' + this.props.myObject.name
            : 'No object loaded';
        return (
            <div>
                {heading}
            </div>
        );
    },
});

给定“myObjectId”prop，组件在安装后触发“myObject”获取 .

另一种常见的方法是从Redux异步操作创建器获取数据（如果它尚未存在）（有关此模式的更多详细信息，请参阅Redux's doc）：

// sync action creator:
const FETCH_OBJECT_SUCCESS = 'FETCH_OBJECT_SUCCESS';
function fetchObjectSuccess(objectId, myObject) {
    return {
        type: FETCH_OBJECT_SUCCESS,
        objectId,
        myObject,
    };
}

// async action creator:
function fetchObject(objectId) {
    return (dispatch, getState) => {
        const currentAppState = getState();
        if (!currentAppState.allObjects[objectId]) {
            // fetches the object if not already present in app state:
            return fetch('some_url_.../' + objectId)
                .then(myObject => (
                    dispatch(fetchObjectSuccess(objectId, myObject))
                ));
        } else {
            return Promise.resolve();  // nothing to wait for
        }
    };
}

回复于 2024-05-06T01:12:11+08:00

延迟加载来自规范化Redux存储的引用

1 回答

相关问题