Question

在服务器上我有JSON架构，它用于收集枚举或最小/最大。然后，数据以表格或其他地方显示。

  componentDidMount() {
    this.props.dispatch(genders());
    this.props.dispatch(races());
    this.props.dispatch(ages());
  }

在每个功能（性别，种族，年龄）中都是这样的：

export const genders = () => (dispatch) => {
  dispatch(requestedProperty('genders'));
  dispatch(schema())
    .then(schema => dispatch(receivedProperty('genders', schema.properties.general.properties.gender.enum)));
};

schema模块正在访问JSON模式，如下所示：

const schema = (method = 'GET') => (dispatch) => {
  dispatch(requestedSchema(method.toUpperCase()));
  return axios.get(`schema/v1/demand/${method.toLowerCase()}.json`)
    .then((response) => {
      dispatch(receivedSchema(response.data));
      return response.data;
    });
};

单个文件有多个请求。我想只下载一次该文件并将内容存储到Redux商店。然后，我想通过getState访问收到的数据。

我已经尝试将getState传递给schema函数并下载文件以防我在Redux商店中什么都没有，但我每次都会得到空对象。

为了完整性我有这个减速器：

export const schema = (state = { fetching: false }, action) => {
  switch (action.type) {
    case REQUESTED_DEMAND_SCHEMA:
      return { ...state, fetching: true };
    case RECEIVED_DEMAND_SCHEMA:
      return { ...state, schema: action.schema, fetching: false };
    case RECEIVED_DEMAND_SCHEMA_PROPERTY:
      return { ...state, [action.property]: action.value };
    default:
      return state;
  }
};

我应该针对这个特定问题使用什么模式？

Answer 1

如果我理解你的问题，我会从这样的事情开始：

// Demographics/container.js

const mapStateToProps = {}

const mapDispatchToProps = () => {
  fetchDemographics,
}

connect(mapStateToProps, mapDispatchToProps)(MyComponent)

// api/genders/get.js

const getGenders = async () =>  {
  // your fetch/axios logic
  // return responseData
}

// Demographics/thunks.js

const fetchGenders = () => async (dispatch, getState) {
  dispatch(request('genders'))
  await getGenders() 
  dispatch(receive('genders'))
}

export const fetchDemographics = () => async (dispatch, getState) => {
  await Promise.all([
    dispatch(fetchGenders()),
    dispatch(fetchRaces()),
    dispatch(fetchAges()),
  ])
}

// Request/reducer.js
const request = (value = '') => ({
  type: 'REQUEST',
  value: '',
})

const receive = (value = '') => ({
  type: 'RECEIVE',
  value: '',
})

export default = (state = { fetching: false }, action) => {
  switch (action.type) {
    case REQUEST:
      return { ...state, value: action.value, fetching: true };
    case RECEIVE:
      return { ...state, value: action.value, fetching: false };
    default:  
      return state;
  }

如果可以独立获取性别，种族和年龄的数据，您可以使用Promise.all()有效地启动请求管道。

您可以使用thunk来管理异步调用以及我可能遗漏的任何其他内容。

通用“请求”缩减器等应足以跟踪商店中的出站请求。

接下来，我将创建一个单独的reducer来存储每个模式的结果。

// Schema/reducer.js
export default = (state = { genders: {}, race: {}, age: {} }}, action) => {
  switch (action.type) {
switch (action.type) {
  case UPDATE:
      return { ...state, [action.property]: action.schema };
  }

从这里您可以使用redux mapStateToProps来访问所需的性别，种族或年龄数据

Answer 2

从您的代码示例中，我不确定您的“单个文件有多个请求”操作在哪里。

你试过ReduxThunk吗？里面的thunk看起来像这样。

export default store => next => action => {
  return typeof action === 'function'
    ? action(store.dispatch, store.getState)
    : next(action);
};

使用Redux只获取一次，然后从商店加载

2 个答案: