Listening to the action of contraction

Question

I want to create a reusable reduct table module that will store and update the page number, displayed pages, etc., which I can share between all my pages.

However, I need refresh actions to trigger the refreshdata action, which will depend on a different endpoint depending on the page.

So maybe something similar to a specific page listens for the RefreshData action, and then starts another action. What would be the best way to achieve this? I am currently using recycling for my middleware, but am looking at sound reductions.

What is the best way to achieve this?

** To clarify **

I have tables on multiple pages / projects and I want to minimize code duplication. I thought I could make a droppable redux module (action + reducer) and then just specify a handler for the REFRESH_DATA action separately, so I would not need to set the keys in this file. I think with redux-saga I could listen to the REFRESH_DATA action and have a switch depending on the current page? Or any of the best deals.

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 

Answer 1

If I understand correctly, it seems that the REFRESH_DATA action is mainly a side effect, which means that the action is sent only as a result of another action. If so, then I would say that a saga sound would be a good choice, because it can sit in the background and “listen” to actions, and then start other actions. But you can get pretty far with custom middleware .

Using special middleware, you can intercept actions as they are sent before they reach the gearboxes. If you have a lot of actions related to updating the table and updating the data, it may make sense to create a common action form for all these actions so that you can listen to it and send special side effects.

A simple implementation might look something like this:

middleware /table.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 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 })); } 

actions.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 }); } 

I took a lot from a real world example: https://github.com/rackt/redux/blob/master/examples/real-world/middleware/api.js .