这是一个redux中间件反模式吗？如何使用中间件正确构建异步操作
这是一个redux中间件反模式吗？如何使用中间件正确构建异步操作
提问于 2016-01-02 02:47:31
刚刚构建了我的第一个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组件中分派区段操作，还是可以让它作为自己的操作创建者？
回答 1
Stack Overflow用户
回答已采纳
发布于 2016-01-02 06:01:14
我想说的是，在Redux世界中，目前还不清楚什么是最佳实践，什么是反模式。这是一个非常不固执己见的工具。虽然这对一个多样化的生态系统来说很好，但它给人们带来了挑战，人们需要寻找方法来组织他们的应用程序，而不会陷入陷阱或过度的样板。据我所知，您的方法似乎与Redux指南的建议大致一致。我觉得有趣的一点是，CHUCK_SUCCESS似乎应该让SAVE_JOKE变得不必要。
我个人觉得让动作创建者分派更多动作是相当尴尬的，所以我制定了反应-还原-控制器背后的方法。它是全新的，所以它肯定不是一个“最佳实践”，但我会把它扔出去，以防你或其他人想尝试一下。在该工作流中，您将拥有一个类似于以下内容的控制器方法：
// 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));
}
},
};页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/34562112
复制相关文章
相似问题
腾讯云开发者
