Listening for a redux action

Question

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

However I need the update actions to trigger a refreshdata action which will be hitting a different endpoint depending on page.

So maybe something along the lines of a page specific listen for the 'RefreshData' action then trigger another action. What would be the best way of acheiving this? I am currently using redux-thunk for my middleware, but have been looking towards redux-saga.

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 was thinking I could maybe make a droppable redux module (action + reducer), and then just specify the handler for the REFRESH_DATA action separately, so I wouldn't need to put switches in this file. I think with redux-saga I could listen for the REFRESH_DATA action and have a switch depending on current page? Or any better suggestions.

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'm understanding correctly, it sounds like the REFRESH_DATA action is mainly a side effect, meaning that action is only dispatched as a result of another action. If that is the case then I'd say redux saga would be a good choice because it can sit in the background and "listen" for actions and then trigger other actions. But, you may be able to get pretty far with a custom middleware.

With custom middleware you can intercept actions as they are dispatched before they hit the reducers. If you're going to have a bunch of actions all related to updating a table and refreshing data, it might make sense to create a common action shape for all of those kinds of actions so that you're middleware can listen for it and dispatch special side-effect actions.

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'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 }));
}

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 this from the real world example: https://github.com/rackt/redux/blob/master/examples/real-world/middleware/api.js.