Реагировать на действия фильтра Redux (пример общей сортировки)

Question

Я сделал метод для создания общего редуктора сортировки.Идея состоит в том, чтобы вызвать действие и отфильтровать его через поле в action.meta.

Метод заключается в следующем:

const initalStateSorting = {
  sortKey: undefined,
  sortOrder: "ASC"
}

const createSortingReducer = (endpoint) => {
  const sorting = (state = {}, action = {}) => {
    switch (action.type) {
      case 'SET_SORT': {
        return {
          sortKey: action.payload.sortKey,
          sortOrder: action.payload.sortOrder
        }
      }
      case 'RESET_SORT': {
        return initalStateSorting
      }
      default:
        return initalStateSorting
    }
  }
  return (sorting)
}

С помощью этого метода я могу создать другой универсальныйРедукторы:

const photos = createSortingReducer('photos')
const text = createSortingReducer('text')

const sorting = combineReducers({
  photos,
  text
})

export default sorting

Проблема этого универсального метода заключается в том, что когда я вызываю действие 'SET_SORT', я устанавливаю сортировку для редуктора фотографий и редуктора текста.

IsЕсть ли способ фильтрации входных действий для соответствующей конечной точки?Какой будет хорошим способом для достижения этой цели?

Answer 1

Наконец, я решил воспользоваться следующим решением:

Здесь есть создатели действий:

import { createAction } from 'redux-actions'

const createSorting = (endpoint) => {
  const setSort = (sort) => {
    return {
      type: `SET_SORT_${endpoint}`,
      payload: {
        sortKey: sort.sortKey,
        sortOrder: sort.sortOrder
      }
    }
  }
  const resetSort = () => {
    return {
      type: `RESET_SORT_${endpoint}`
    }
  }
  return {
    setSort,
    getSort,
    resetSort
  }
}


export const testSorting = createSorting('TEST')

И редукторы могут быть созданы с каждым из созданных ключей.Идея заключается в том, что у вас будет независимый приемник действий (возможно, будет лучше иметь возможность решить это в будущих версиях Redux).Вот пример:

import { combineReducers, createStore } from 'redux'
import { handleActions } from 'redux-actions'
import Immutable from 'immutable'

const SORT_ASC = 'asc'
const SORT_DESC = 'desc'
const defaultSortOrder = SORT_ASC

const initalStateSorting = {
  sortKey: undefined,
  sortOrder: defaultSortOrder
}

const test= handleActions({
  SET_SORT_TEST: (state, action) => {
    return {
      sortKey: action.payload.sortKey,
      sortOrder: action.payload.sortOrder
    }
  },
  RESET_SORT_TEST: (state, action) => {
    return initalStateSorting
  },
}, initalStateSorting)

const sorting = combineReducers({
  test
})

export default sorting

Answer 2

Внутри редуктора вы можете создать объект и установить значение соответствующего конкретного конечного редуктора, т.е. для фотографий передать фотографии и установить сортировку, соответствующую фотографиям, например - в редукторе создать объект, подобный этому

{ 
  ...state,{ 
        photos:{ 
        sortKey: action.payload.sortKey,
        sortOrder: action.payload.sortOrder
        }
    }
}

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