我正在尝试将Redux集成到我的React项目中。目前,我没有使用任何Flux框架。
我的应用程序从API获取一些数据,并以一种漂亮的方式显示它们,如下所示:
componentDidMount() {
getData();
}
getData() {
const self = this;
ajax({
url: apiUrl,
})
.success(function(data) {
self.setState({
data: data,
});
})
.error(function() {
throw new Error('Server response failed.');
});
}
在阅读有关Redux的文章时,我确定了两种可用于处理将成功数据存储在商店中的方法:
ADD_DATA
从ajax函数的成功回调中分派动作但是我不确定哪种方法更好。
回调中的分派操作听起来很容易实现和理解,而异步中间件则很难向不习惯使用功能性语言的人解释。
我个人更喜欢使用自定义中间件来完成此任务。它使操作更容易遵循,并减少了IMO的样板。
我已经设置了中间件来查找从匹配特定签名的操作返回的对象。如果找到此对象架构,则将对其进行特殊处理。
例如,我使用一个看起来像这样的动作:
export function fetchData() {
return {
types: [ FETCH_DATA, FETCH_DATA_SUCCESS, FETCH_DATA_FAILURE ],
promise: api => api('foo/bar')
}
}
我的自定义中间件看到对象具有types
数组和promise
函数,并对其进行了特殊处理。看起来是这样的:
import 'whatwg-fetch';
function isRequest({ promise }) {
return promise && typeof promise === 'function';
}
function checkStatus(response) {
if (response.status >= 200 && response.status < 300) {
return response;
} else {
const error = new Error(response.statusText || response.status);
error.response = response.json();
throw error;
}
}
function parseJSON(response) {
return response.json();
}
function makeRequest(urlBase, { promise, types, ...rest }, next) {
const [ REQUEST, SUCCESS, FAILURE ] = types;
// Dispatch your request action so UI can showing loading indicator
next({ ...rest, type: REQUEST });
const api = (url, params = {}) => {
// fetch by default doesn't include the same-origin header. Add this by default.
params.credentials = 'same-origin';
params.method = params.method || 'get';
params.headers = params.headers || {};
params.headers['Content-Type'] = 'application/json';
params.headers['Access-Control-Allow-Origin'] = '*';
return fetch(urlBase + url, params)
.then(checkStatus)
.then(parseJSON)
.then(data => {
// Dispatch your success action
next({ ...rest, payload: data, type: SUCCESS });
})
.catch(error => {
// Dispatch your failure action
next({ ...rest, error, type: FAILURE });
});
};
// Because I'm using promise as a function, I create my own simple wrapper
// around whatwg-fetch. Note in the action example above, I supply the url
// and optionally the params and feed them directly into fetch.
// The other benefit for this approach is that in my action above, I can do
// var result = action.promise(api => api('foo/bar'))
// result.then(() => { /* something happened */ })
// This allows me to be notified in my action when a result comes back.
return promise(api);
}
// When setting up my apiMiddleware, I pass a base url for the service I am
// using. Then my actions can just pass the route and I append it to the path
export default function apiMiddleware(urlBase) {
return function() {
return next => action => isRequest(action) ? makeRequest(urlBase, action, next) : next(action);
};
}
我个人喜欢这种方法,因为它集中了很多逻辑,并为您提供了有关api动作的结构的标准实施方式。不利的一面是,对于那些不熟悉redux的人来说,这可能有些神奇。我还使用了thunk中间件,到目前为止,这两者都可以满足我的所有需求。
问题内容: 我正在一个网站上,我们从XML文件中获取信息。效果很好,但是现在我需要对内容进行滑动。为此,我将使用jCarousel声明它们可以通过调用回调函数来处理动态加载的内容。 但是,当我成功调用函数时,无法进行初始的ajax加载。我究竟做错了什么? 我做错什么了吗?还是我必须去一个完全不同的地方?:-) 问题答案: 使用hulabula代替hulabula()或将函数直接传递给ajax选项:
问题内容: 据我了解,在ES7 /ES2016中,将多个in放在代码中的工作方式类似于带有promise的链接,这意味着它们将一个接一个地执行而不是并行执行。因此,例如,我们有以下代码: 我是否正确理解仅在完成时才会调用?并行调用它们的最优雅方式是什么? 我想在Node中使用它,所以也许有一个异步库解决方案? 编辑:我对这个问题提供的解决方案不满意:减速是由于异步生成器中非并行等待Promise的
我试图创建一个重载函数,该函数将用对象的动态类型调用。我尽量做到这一点,而不干扰下面的实际类结构,因为我没有直接访问权限(即我无法添加虚拟方法等) 作为一个具体的例子,让我们考虑一个AST类结构,它看起来有点像这样: 我想编写一个函数act,它将ASTNode的一个实例作为参数,并根据其实际的动态类型执行不同的操作。电话是这样的 然后,我想根据ASTNode的动态类型采取行动。 但目前我无法调用,
问题内容: 我有以下JavaScript代码: 我如何确保仅在完成后调用? 问题答案: 指定一个匿名回调,并使function1接受它:
本文向大家介绍AjaxFileUpload.js实现异步上传文件功能,包括了AjaxFileUpload.js实现异步上传文件功能的使用技巧和注意事项,需要的朋友参考一下 做软工作业时,需要实现无刷新异步上传图片到服务器,于是想利用Ajax: 得到file的val,再post过去… 等真正实现的时候才发现,根本行不通。 于是翻来翻去找到一个封装好的js插件,可以实现异步上传文件。 AjaxFile
我写这个问题是因为我想请你帮助我如何在我的功能组件上使用redux。我查看了其他使用React组件的示例,但我不理解如何在功能组件中获得“存储”值。 我的想法是用我的 百货商店getState() 在我的功能组件中检查状态并与UI交互,但我无法实现。 需要帮忙吗? 例如,功能组件: 如何在标题组件中使用“存储”对象?它在我的应用程序组件上工作,只是我不知道如何在我的组件中使用它。 我的问题是: 我