Question

我正在使用Redux构建一个非常简单的应用程序，我的Reducer看起来都很相似。从技术上讲，它可以工作，但这是很多代码重复。

// The employees reducer
export default (state = initialState, action) => {
  switch (action.type) {
    case EMPLOYEES_REQUEST:
      return [ ...state, { isFetching: true } ]
    case EMPLOYEES_SUCCESS:
      // DEBUG
      console.log('Dispatching employees');
      console.log(action.response);
      // END DEBUG

      // Return employees directly in the employees state
      return { ...state, list: JSON.parse(action.response) };
    case EMPLOYEES_FAILURE:
      return [ ...state, { isFetching: false } ]
    default:
      return state
    }
}

并且

// The services reducer
export default (state = initialState, action) => {
  switch (action.type) {
    case SERVICES_REQUEST:
      return [ ...state, { isFetching: true } ]
    case SERVICES_SUCCESS:
      // DEBUG
      console.log('Dispatching services');
      console.log(action.response);
      // END DEBUG

      // Return services directly in the services state
      return { ...state, list: JSON.parse(action.response) };
    case SERVICES_FAILURE:
      return [ ...state, { isFetching: false } ]
    default:
      return state
    }
}

我可以使用具有不同操作的通用缩减器吗？

谢谢！

Answer 1

Reducer只是一个功能。你总是可以使用更高阶的函数来实现它。

const makeListReducer = (initial, prefix) => (state = initial, action) => {
  switch(action.type) {
    case `${prefix}_REQUEST`: return {...state, isFetching: true}
    case `${prefix}_SUCCESS`: return {...state, isFetching: false, list: JSON.parse(action.response)}
    case `${prefix}_FAILURE`: return {...state, isFetching: false, /*etc*/}
  }

  return state
}

// The employees reducer
export default makeListReducer(initialState, 'EMPLOYEES')

我的redux减速器看起来都一样。我做错了吗？

1 个答案: