我已经使用 React 和 Redux 大约 3 年了。 我还使用 redux-thunk 来处理异步内容。

而且我非常喜欢它们，但最近我注意到我项目中几乎所有的鸭子都使用相同的 Action 、缩减器、选择器等结构。

例如 - 您有一个应用程序，它有一些用户和交易(或类似)列表、项目详细信息和编辑功能。 所有这些列表或项目都有自己的鸭子( Action 、缩减器、选择器等)。

下面的代码将更清楚地显示问题:

// ACTIONS

const const setUser = user => ({
  type: types.SET_USER,
  payload: user,
});

const cleanUser = () => ({ type: types.CLEAN_USER });

const fetchUser = userId => dispatch =>
  dispatch(fetchApi(userRequests.get(userId)))
    .then(response => dispatch(setUser(response)))
    .catch(error => showNotification(error));

// delete, update, etc... user actions

// REDUCER

const userReducer = (state = null, action) => {
  switch (action.type) {
    case types.SET_GROUP_ITEM:
      return action.payload;
    case types.CLEAN_GROUP_ITEM:
      return null;
    default:
      return state;
  }
};

上面的代码显示了 users duck 的 user 的结构，这对于其他 ducks 几乎是一样的。

有没有办法减少重复代码？ 感谢您的提前!

最佳答案

I noticed that almost all ducks in my project are using the same structure of actions, reducers, selectors, etc.

我从未实现过 reducks Redux 中的结构，但我确实有一次发现自己在管理我的域实体(例如人员、订单、产品等)时生成相同 操作、reducer 等。

例如，我似乎总是关心:

1. 我们目前正在获取实体吗？ 正在获取
2. 获取实体时是否有任何错误？ 错误
3. 实体的实际数据是什么？ 数据
4. 上次获取实体是什么时候？ 上次更新时间

此外，域实体一直在添加，因此不断复制和粘贴 reducer/actions 并不理想。我们需要一种在 Redux 中动态存储数据的方法，我们希望数据始终附加到 isFetching 和 lastUpdated 等属性。

{
  "entities": {
    <SOME_ENTITY>: {
      "isFetching" : null    // Am I fetching?
      "lastUpdated": null    // When was I last fetched?
      "data"       : null    // Here's my data!
      "error"      : null    // Error during fetching
    }
  }
}

那么，如果我们发出一个带有字符串文字的操作，该文字将用作 Redux 中的键(例如 products、orders)怎么办？这样，我们就可以发出任何可用的有效操作类型(FETCH_REQUEST 等)，我们只需要更新 entity 键，它将自动划分出商店中为我们提供的空间:

dispatch({
    entity     : "products",
    type       : "FETCH_SUCCESS", 
    data       : [{id: 1}],
    lastUpdated: Date.now()
});

dispatch({
    entity    : "orders",
    type      : "FETCH_SUCCESS",
    data      : [{id: 2}, {id: 3}],
    lastUpdated: Date.now()
});

结果状态

{
  "entities": {
    "products": {
      "isFetching" : false,
      "lastUpdated": 1526746314736,
      "data"       : [{id: 1}]
      "error"      : null
    },
    "orders": {
      "isFetching" : false,
      "lastUpdated": 1526746314943,
      "data"       : [{id: 2}, {id: 3}]
      "error"      : null
    }
  }
}

通用实体 reducer

function entities (state = {}, action) {
    switch (action.type) {
        case FETCH_SUCCESS: // fall through
        case FETCH_FAILURE: // fall through
        case FETCH_REQUEST: {
            return Object.assign({}, state, {
                [action.entity]: entity(
                    state[action.entity],
                    action
                )
            });
        }
        default: {
            return state;
        }
    }
};

实体缩减器

const INITIAL_ENTITY_STATE = {
    isFetching : false,
    lastUpdated: null,
    data       : null,
    error      : null
};

function entity (state = INITIAL_ENTITY_STATE, action) {
    switch (action.type) {
        case FETCH_REQUEST: {
            return Object.assign({}, state, {
                isFetching: true,
                error     : null
            });
        }
        case FETCH_SUCCESS: {
            return Object.assign({}, state, {
                isFetching : false,
                lastUpdated: action.lastUpdated,
                data       : action.data,
                error      : null
            });
        }
        case FETCH_FAILURE: {
            return Object.assign({}, state, {
                isFetching : false,
                lastUpdated: action.lastUpdated,
                data       : null,
                error      : action.error
            });
        }
    }
}

同样，通过使用通用的 reducer，我们可以动态地将我们想要的任何内容存储到 Redux 中，因为我们使用下面的 entity 字符串作为 Redux 中的键

dispatch({type: "FETCH_REQUEST", entity: "foo"});
dispatch({type: "FETCH_REQUEST", entity: "bar"});
dispatch({type: "FETCH_REQUEST", entity: "baz"});

结果状态

{
  "entities": {
    "foo": {
      "isFetching": true,
      "error": null,
      "lastUpdated": null,
      "data": null
    },
    "bar": {
      "isFetching": true,
      "error": null,
      "lastUpdated": null,
      "data": null
    },
    "baz": {
      "isFetching": false,
      "error": null,
      "lastUpdated": null,
      "data": null
    }
  }
}

如果这看起来很有趣，我确实写了一个小库(插件!)，它完全符合上面描述的内容:

• https://github.com/mikechabot/redux-entity
• https://www.npmjs.com/package/redux-entity

现场演示: http://mikechabot.github.io/react-boilerplate/dist/

就是说，我并没有插入那个库，我只是想描述我遇到的问题所采用的方法。您的操作集可能完全不同，在这种情况下，您仍然可以实现通用模式，但显然 reducer 的行为会有所不同。

关于javascript - 如何避免 redux 中的重复代码(鸭子方法)？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50413614/