React Redux 过滤器操作（通用排序示例）答案

【问题标题】：React Redux filter actions (generic sorting example)React Redux 过滤器操作（通用排序示例）
【发布时间】：2018-09-20 14:38:32
【问题描述】：

我已经做了一个方法来创建一个通用的排序减速器。这个想法是调用一个动作并通过 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”操作时，我正在为照片缩减器和文本缩减器设置排序。

有没有办法过滤输入动作到相应的端点？实现这一目标的好方法是什么？

【问题讨论】：

标签： reactjs redux react-redux reducers

【解决方案1】：

在 reducer 中，您可以创建一个对象并设置相应特定端点 reducer 的值，即照片传递照片并设置与照片对应的排序，例如 - 在 reducer 中创建这样的对象

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

类似地对文本做，然后你可以先从与端点对应的状态中过滤值，然后设置它的值，这样你就不会复制多个。

【讨论】：

通过这种方法，我最终会得到以下 setSort：return { [endpoint]: { sortKey: action.payload.sortKey, sortOrder: action.payload.sortOrder } }。这将不允许我过滤操作端点。两个端点都会收到 set_state 动作
是的，对于过滤，您可以像这样从排序减速器状态中获取相应的端点。对于文本，您可以执行 state.sortingReducer.text.sortkey
我可以选择创建两个 reducer，但这是一个 reducer 创建者。两个创建的 reducer 的状态都是 state.sortingReducer.endpoint.sortkey
是的，这实际上是更好的方法，为什么要为这个简单的任务创建多个减速器。

【解决方案2】：

最后我决定采用以下解决方案：

这里有动作创建者：

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

而且，reducers 可能会使用每个创建的键创建。这个想法是你将有一个独立的动作接收器（也许在未来版本的 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

【讨论】：