Question

刚刚建立了我的第一个API中间件，我只想知道我想把动作创建者的承诺链接到多个动作。我做了什么反模式：

export const fetchChuck = () => {
  return {
    [CALL_API]: {
      types: [ CHUCK_REQUEST, CHUCK_SUCCESS, CHUCK_FAILURE ],
      endpoint: `jokes/random`
    }
  }
}

export const saveJoke = (joke) => {
  return { type: SAVE_JOKE, joke: joke }
}

export const fetchAndSaveJoke = () => {
  return dispatch => {
    dispatch(fetchChuck()).then((response) => {
      dispatch(saveJoke(response.response.value.joke))
    })
  }
}

fetchAndSaveJoke应该在我的react组件中调度section动作还是可以将它作为自己的动作创建者？

Answer 1

我想说，在Redux世界的这一点上，并不是很清楚什么是最佳实践以及反模式是什么。这是一个非常不受欢迎的工具。虽然这对于多元化的生态系统蓬勃发展非常有用，但它确实为寻找组织应用程序的方式的人们带来了挑战，而不会遇到陷阱或过多的样板。据我所知，您的方法似乎与Redux指南的建议大致相符。对我来说有趣的一件事是，似乎CHUCK_SUCCESS可能使SAVE_JOKE不必要。

我个人觉得让行动创作者派出更多行动相当尴尬，所以我制定了react-redux-controller背后的方法。它是全新的，所以它肯定不是“最佳实践”，但如果您或其他人想尝试，我会把它扔出去。在该工作流程中，您将拥有一个类似于：

的控制器方法

// actions/index.js

export const CHUCK_REQUEST = 'CHUCK_REQUEST';
export const CHUCK_SUCCESS = 'CHUCK_SUCCESS';
export const CHUCK_FAILURE = 'CHUCK_FAILURE';

export const chuckRequest = () => { type: CHUCK_REQUEST };
export const chuckSuccess = (joke) => { type: CHUCK_SUCCESS, joke };
export const chuckFailure = (err) => { type: CHUCK_FAILURE, err };

// controllers/index.js
import fetch from 'isomorphic-fetch'; // or whatever
import * as actions from '../actions';

const controllerGenerators = {
  // ... other controller methods
  *fetchAndSaveJoke() {
    const { dispatch } = yield getProps;

    // Trigger a reducer to set a loading state in your store, which the UI can key off of
    dispatch(actions.chuckRequest());

    try {
      const response = yield fetch('jokes/random');
      dispatch(actions.chuckSuccess(response.response.value.joke));
    } catch(err) {
      dispatch(actions.chuckFailure(err));
    }
  },
};

这是一个redux中间件反模式吗？如何使用中间件正确构建异步操作

1 个答案: