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

Question

哟！我正在使用 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 不是调用操作的正确位置。对于我忽略的这种情况，是否有明显的解决方案（除了预取我的所有数据）？

Answer 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”属性，组件在挂载后触发“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
        }
    };
}