Прослушивание действия redux

Question

Я хочу создать многократно используемый модуль таблицы редукции, который будет хранить и обновлять номер страницы, отображаемые страницы и т. Д., Которые я могу разделить между всеми моими страницами.

Однако мне нужны действия по обновлению, чтобы вызвать действие refreshdata, которое будет зависеть от другой конечной точки в зависимости от страницы.

Так что, возможно, что-то в соответствии с конкретными страницами прослушивает действие «RefreshData», а затем запускает другое действие. Что было бы лучшим способом добиться этого? В настоящее время я использую утилизацию для моего промежуточного программного обеспечения, но смотрю на саму спасик.

Каков наилучший способ достичь этого?

** Для уточнения **

У меня есть таблицы на несколько страниц/проектов, и я хочу, чтобы свести к минимуму дублирования кода. Я думал, что мог бы сделать модуль droppable redux (action + 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 

Answer 1

Если я правильно понять, это звучит как REFRESH_DATA действия главного побочный эффект, а это означает, что действие только отправляются в результате другого действия. Если это так, то я бы сказал, что сага саунд будет хорошим выбором, потому что она может сидеть в фоновом режиме и «слушать» действия, а затем запускать другие действия. Но вы можете получить довольно далеко с обычным 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 
    }); 
} 

Я взял много это из реальный мир пример: https://github.com/rackt/redux/blob/master/examples/real-world/middleware/api.js.