Question

用户上传图片后，我需要推一条新路线。根据用户当前所在的特定模块，新路由会有所不同。目前，actionRouteEpic会过滤新路由，然后在每个if语句中调用PUSH_ROUTE，但是有一种更新{{1 }}变量，然后在切换映射的末尾调用一次route？

第一个代码示例是有效但笨拙的版本。第二个示例是最近一次尝试使用更干净版本的尝试。

目前这有效：

PUSH_ROUTE

尝试使用更干净的版本：

const actionRouteEpic = action$ =>
  action$.pipe(
    ofType('DISPATCH_ACTION_ROUTE'),
    switchMap(action => {
        if (action.module === 'module_one') {
          return of({
            type: 'PUSH_ROUTE',
            route: '/route-one'
          });
        }
        if (action.module === 'module_two') {
          return of({
            type: 'PUSH_ROUTE',
            route: '/route-two'
          });
        }
        if (action.module === 'module_three') {
          return of({
            type: 'PUSH_ROUTE',
            route: '/route-three'
          });
        }
        return empty();
      }
  );

const pushRouteEpic = action$ =>
  action$.pipe(
    ofType('PUSH_ROUTE'),
    map(action => push(`${action.route}`))
  );

谢谢，谢谢。

Answer 1

const actionRouteEpic = action$ =>
  action$.pipe(
    ofType('DISPATCH_ACTION_ROUTE'),
    switchMap(action => of({
      type: 'PUSH_ROUTE',
      route: action.module === 'module_one' ? '/route-one' : 
             action.module === 'module_two' ? '/route-two' :
             '/route-three'
    })
  );

Answer 2

使用js对象作为哈希映射，并定义一个“路由器”，将每个模块映射到相关的入口路径

const actionRouteEpic = action$ =>
 const router = {
    module_one: '/route-one',
    module_two: '/route-two'
 } 
 action$.pipe(
    ofType('DISPATCH_ACTION_ROUTE'),
    switchMap(action => {     
        return of({
            type: 'PUSH_ROUTE',
            route: router[action.module]
          });
      }
  );

Answer 3

您的代码没有错，但是您可以使用作用在地图上的函数来使其变得“干净”：

const selectRouteFromActionModule = action =>
  of(
    {
      module_one: '/route-one',
      module_two: '/route-two',
      module_three: '/route-three',
    }[action.module],
  );

const actionRouteEpic = action$ =>
  action$.pipe(
    ofType('DISPATCH_ACTION_ROUTE'),
    switchMap(selectRouteFromActionModule),
  );

有没有更干净（更动态）的方式在RxJS中编写此映射函数？

3 个答案: