0

刚刚构建了我的第一个 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 应该在我的反应组件中调度部分动作，还是可以将其作为自己的动作创建者？

4

1 回答 1

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));
    }
  },
};
于 2016-01-02T06:01:14.397 回答