使用 Redux 只获取一次，然后从存储中加载答案

【问题标题】：Fetch just once with Redux then load from store使用 Redux 只获取一次，然后从存储中加载
【发布时间】：2017-12-26 15:40:43
【问题描述】：

在服务器上，我有 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)));
};

架构函数访问 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;
  }
};

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

【问题讨论】：

标签： json reactjs redux redux-thunk

【解决方案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 或类似的东西应该足以跟踪您商店中的出站请求。

接下来，我将创建一个单独的 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 访问所需的性别、种族或年龄数据

【讨论】：

【解决方案2】：

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

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

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

【讨论】：