侦听 redux 操作
Listening for a redux action
我想创建一个可重用的 redux 表模块,它将存储和更新页码、显示的总页数等,我可以在所有页面之间共享。
但是,我需要更新操作来触发刷新数据操作,该操作将根据页面到达不同的端点。
因此,也许类似于页面特定内容的内容侦听"刷新数据"操作,然后触发另一个操作。实现这一目标的最佳方法是什么?我目前正在使用redux-thunk作为我的中间件,但一直在寻找redux-saga。
实现这一目标的最佳方法是什么?
**澄清 **
我在多个页面/项目上有表格,我想最大限度地减少代码重复。我在想我也许可以制作一个可丢弃的 redux 模块(动作 + reducer),然后分别指定REFRESH_DATA动作的处理程序,这样我就不需要在这个文件中放置开关。我认为使用 redux-saga 我可以监听REFRESH_DATA操作并根据当前页面进行切换?或任何更好的建议。
export const ITEMS_PER_PAGE_UPDATED = 'ITEMS_PER_PAGE_UPDATED'
export const CURRENT_PAGE_UPDATED = 'CURRENT_PAGE_UPDATED'
export const REFRESH_DATA = 'REFRESHDATA'
export const DATA_REFRESHED = 'REFRESHDATA'
export function currentPageUpdated(value) {
return function (dispatch) {
dispatch({
type: CURRENT_PAGE_UPDATED,
value
})
dispatch({type:REFRESH_DATA})
}
}
export function itemsPerPageUpdated(value) {
return function (dispatch) {
dispatch({
type: ITEMS_PER_PAGE_UPDATED,
value
})
dispatch({type:REFRESH_DATA})
}
}
function reducer(state={ pageNumber:1, pageSize:10, totalItems:0, totalPages:1, sortColumn:null, sortAscending:true }, action) {
switch(action.type) {
case ITEMS_PER_PAGE_UPDATED:
return Object.assign({}, state, {pageSize: action.value, pageNumber:1})
case CURRENT_PAGE_UPDATED:
return Object.assign({}, state, {pageNumber: action.value})
case DATA_REFRESHED:
return Object.assign({}, state, {totalPages: action.values.totalPages, totalItems:action.values.totalItems})
default:
return state
}
}
export default reducer
如果我理解正确,听起来REFRESH_DATA
操作主要是一种副作用,这意味着该操作仅作为另一个操作的结果而调度。 如果是这种情况,那么我会说 redux saga 将是一个不错的选择,因为它可以坐在后台并"侦听"操作,然后触发其他操作。 但是,您可以使用自定义中间件走得很远。
使用自定义中间件,您可以在操作到达化简器之前拦截它们。 如果您要有一堆与更新表和刷新数据相关的操作,那么为所有这些类型的操作创建一个通用的操作形状可能是有意义的,以便您的中间件可以侦听它并调度特殊的副作用操作。
一个简单的实现可能如下所示:
中间件/表.js
import fetchData from '../somewhere';
import { DATA_REFRESHED } from '../actions';
// Make a unique identifier that you're actions can send so you're
// middleware can intercept it
export const UPDATE_TABLE = Symbol('UPDATE_TABLE');
export default store => next => action => {
const tableUpdate = action[UPDATE_TABLE];
// If the action doesn't have the symbol identifier, just move on
if (typeof tableUpdate === 'undefined') {
return next(action);
}
// At this point, you know that the action that's been dispatched
// is one that involves updating the table, so you can do a fetch
// for data
// Get whatever data you need to fetch
const { id, type, data } = tableUpdate;
// Dispatch the actual type of action to the store
next({ type, data });
// Go and fetch the data as a side-effect
return fetchData(id)
.then(response => next({ type: DATA_REFRESHED, data: response }));
}
操作.js
import { UPDATE_TABLE } from '../middleware/table.js';
// An action creator to dispatch the special table update action
// This is a simple example, but you'd probably want to be consistent
// about how the table update actions are shaped. The middleware
// should be able to pick out all of the data it needs to fetch data
// from whatever is sent with the action
function updateTable(action) {
return {
[UPDATE_TABLE]: action
};
}
export function currentPageUpdated(value) {
return updateTable({
type: CURRENT_PAGE_UPDATE,
value
});
}
我从现实世界的例子中得到了很多:https://github.com/rackt/redux/blob/master/examples/real-world/middleware/api.js。
- 使用immutable.js在Redux中操作嵌套数组中的数据
- 使用react router/react router redux将特定的redux操作绑定到一个路由
- 在Redux中链接async和sync操作以计算初始状态
- Redux-正确调度操作
- Redux:为什么不把操作和reducer放在同一个文件中呢
- React+Redux-未捕获错误:操作可能没有未定义的“;类型“;所有物
- reactJs redux:如何对用户事件调度操作并将操作与化简器和存储链接
- 如果条件,则在其他操作之后调用 Redux 操作
- React/Redux 状态在第二次操作调用时为空
- 我应该如何在redux中构建/传递我的数据或操作
- React/Redux,使用Redux-Thunk实现多项操作
- 无法在Redux中测试异步操作
- 我可以在React和Redux中发送一个AJAX调用,而不需要操作创建者和还原器吗
- 当我在异步操作Redux上开始单元测试时,没有定义错误承诺
- 状态更改时会不必要地触发Redux操作
- 为什么在Redux存储中使用字符串而不是直接方法调用来触发操作
- Redux 操作创建者在另一个内部调用一个
- Redux 中的异步操作
- 我可以在没有 Redux Thunk 中间件的情况下调度多个操作吗?
- 执行操作时 redux 中的错误:未捕获的类型错误:无法读取未定义的属性“类型”