Question

我可以使用每个容器中的条件显示加载器图标，但是当使用更高阶的组件时，我无法显示它。我在下面发布了我的代码。我使用过immutable.js，redux-saga。下面是我编码的代码无效

const mapStateToProps = createStructuredSelector({
  logs: selectLogs(),
  logState: selectAllLogState(), #has requesting flag in it
  dialog: selectDialog()
});

class Logs extends React.PureComponent {}

export default connect(mapStateToProps, mapDispatchToProps)(
  Loader("requesting")(Logs)
);

export const selectAllLogState = () => state => state.get("logs");

export const selectLogs = () => state => state.getIn(["logs", "logs"]);

const Loader = prop => WrappedComponent => {
  return class Loader extends React.Component {
    render() {
      return this.props[prop]
        ? <div className="earth-spinning">
            <img
              src={EarthSpinning}
              alt="spinner"
              style={{ margin: "0 auto" }}
            />
          </div>
        : <WrappedComponent {...this.props} />;
    }
  };
};

export default Loader;

const initialState = fromJS({
  requesting: false,
  deleted: false,
  response: {},
  logs: {},
  error: null
});

function showLogs(state = initialState, action) {
  switch (action.type) {
    case LOGS_FETCH_REQUEST:
      return state.set("requesting", true);
    case LOGS_FETCH_SUCCESS:
      return state
        .set("requesting", false)
        .set("logs", fromJS(action.logs.data.dataList, idReviver));
    case LOGS_FETCH_FAILURE:
      return state.set("error", action.error).set("requesting", false);
    default:
      return state;
  }
}

export default showLogs;

Answer 1

用这个片段很难说，你确定你的商店从商店获得了正确的道具吗？

Answer 2

您可以传播selectLogs()电话中的所有密钥，例如

createStructuredSelector({ ...selectLogs(), logState: selectAllLogState(), });

或明确设置此道具：

const mapStateToProps = createStructuredSelector({ logs: selectLogs(), requesting: selectLogs().requesting });

使用高阶组件显示加载器

2 个答案: