Reactjs 来自Redux的规范化数据未显示在前端（使用react）

我已经通过redux中的数据进行了规范化，但是现在在前端抓取并显示它会导致问题

几天来我一直在努力解决这个问题，我已经尝试了我觉得最明显的方法。道具。。。。但我显然遗漏了什么。正在使用曼宁最新的关于Redux的书，Redux在行动中，到目前为止，这对我来说是一个很好的指南

我试图分解数据，这样树就会有业务（仪表板）和业务位置（另一页）

在我的Redux DevTools控制台中，操作树如下所示：

type: 'RECEIVE_ENTITIES'
payload
  entities
    business_locations
    - 652 {id: 652, business_id: 452...}
    business
    - 452 {id: 452}
  result: 452

我的朋友：

import {
  RECEIVE_ENTITIES,
  FETCH_BUSINESS_STARTED,
  FETCH_BUSINESS_SUCCESS,
  SET_CURRENT_BUSINESS_ID,
} from '../../actions/types';

const initialBusinessState = {
  items: [],
  isLoading: false,
  error: null,
};

export const getBusinesses = state => {
  return Object.keys(state.business.items).map(id => {
    return state.business.items[id];
  });
};

export default function businesses(state = initialBusinessState, action) {
  switch (action.type) {
    case RECEIVE_ENTITIES: {
      const { entities } = action.payload;
      if (entities && entities.businesses) {
        return {
          ...state,
          isLoading: false,
          items: entities.businesses,
        };
      }
      return state;
    }
    case FETCH_BUSINESS_STARTED: {
      return {
        ...state,
        isLoading: true,
      };
    }
    case FETCH_BUSINESS_SUCCESS: {
      return {
        ...state,
        isLoading: true,
        items: action.payload.businesses,
      };
    }
    default: {
      return state;
    }
  }
}

export function setCurrentBusinessId(id) {
  return {
    type: SET_CURRENT_BUSINESS_ID,
    payload: {
      id,
    },
  };
}

我的商业行为

import { normalize } from 'normalizr';
import {
  FETCH_BUSINESS_STARTED,
  FETCH_BUSINESS_ERROR,
  RECEIVE_ENTITIES,
  SET_CURRENT_BUSINESS_ID,
} from './../types';
import * as schema from '../schema';
import * as api from '../../api';

function fetchBusinessStarted() {
  return {
    type: FETCH_BUSINESS_STARTED,
  };
}


function fetchBusinessFailed(err) {
  return {
    type: FETCH_BUSINESS_ERROR,
    payload: {
      err,
    },
  };
}

function receiveEntities(entities) {
  return {
    type: RECEIVE_ENTITIES,
    payload: entities,
  };
}

export function setCurrentBusinessId(id) {
  return {
    type: SET_CURRENT_BUSINESS_ID,
    payload: {
      id,
    },
  };
}

export function fetchBusinesses() {
  return (dispatch, getState) => {
    dispatch(fetchBusinessStarted());

    return api
      .fetchBusinesses()
      .then(resp => {
        const businesses = resp.data;

        const normalizedData = normalize(businesses, schema.businessSchema);
        console.log('normalizedData', normalizedData);
        dispatch(receiveEntities(normalizedData));

        if (!getState().page.currentBusinessId) {
          const defaultBusinessId = sessionStorage.getItem('business_id');
          dispatch(setCurrentBusinessId(defaultBusinessId));
        }
      })
      .catch(err => {
        console.log(err);
        fetchBusinessFailed(err);
      });
  };
}

我的减页器

import { SET_CURRENT_BUSINESS_ID } from '../../actions/types';

const InitialPageState = {
  currentBusinessId: null,
};

export default function page(state = InitialPageState, action) {
  switch (action.type) {
    case SET_CURRENT_BUSINESS_ID: {
      return {
        ...state,
        currentBusinessId: action.payload.id,
      };
    }
    default: {
      return state;
    }
  }
}

我的模式

import { schema } from 'normalizr';

const businessLocationSchema = new schema.Entity('business_locations');
const businessSchema = new schema.Entity('business', {
  business_locations: [businessLocationSchema],
});

export { businessSchema };

减根剂

const rootReducer = (state = {}, action) => {
  return {
    page: pageReducer(state.page, action),
    business: businessReducer(state.businesses, action),
    businessLocation: businessLocationsReducer(state.businessLocations, 
 action),
    form: formReducer,
  };
};

前端：

class Dashboard extends React.Component {
  componentDidMount() {
    this.props.dispatch(fetchBusinesses());
  }
  render() {
    if (this.props.isLoading) {
      return (
        <SpinContainer>
          <Spin size="large" />
        </SpinContainer>
      );
    }
    console.log(this.props);
    return (
      <Wrapper>
        <Card bordered={false}>
          <Maps
            zoom={16}
            loadingElement={<div style={{ height: `100%` }} />}
            containerElement={<div style={{ height: `30vh` }} />}
            mapElement={<div style={{ height: `100%` }} />}
          />


          <p>{this.props.business.website}</p>
          <p>{this.props.business.businessName}</p>

        </Card>

        <Link to="/locations">
          <Card bordered={false}>
            <h1>****</h1>
          </Card>
        </Link>

        <Link to="stamp-cards">
          <Card bordered={false}>
            <h1>*****</h1>
          </Card>
        </Link>

        <Card bordered={false}>
          <h1>*****</h1>
        </Card>
      </Wrapper>
    );
  }
}

function mapStateToProps(state) {
  const { isLoading, business } = state.business;
  return {
    business: getBusinesses(state),
    isLoading,
  };
}

export default connect(mapStateToProps)(Dashboard);

类仪表板扩展了React.Component{
componentDidMount（）{
this.props.dispatch（fetchbusinesss（））；
}
render（）{
如果（此.props.isload）{
返回(
);
}
console.log（this.props）；
返回(
{this.props.business.website}

{this.props.business.businessName}

****
*****
*****
);
}
}
函数MapStateTops（状态）{
const{isLoading，business}=state.business；
返回{
业务：GetBusinesss（州），
孤岛，
};
}
导出默认连接（MapStateTops）（仪表板）；

正在发生的具体问题是什么？@ryanwebjackson当我使用console.log this.props时，我似乎无法在屏幕上输出实际数据。我得到{business:Array（0），isLoading:false…}。但是在redux开发工具中，我看到了我正在寻找的数据。