我想创建一个可重用的 redux 表模块,它将存储和更新页码、显示的总页数等,我可以在所有页面之间共享。
但是,我需要更新操作来触发刷新数据操作,该操作将根据页面到达不同的端点。
因此,也许某些特定于页面的内容会监听“RefreshData”操作,然后触发另一个操作。实现这一目标的最佳方法是什么?我目前正在为我的中间件使用 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