小编dot*_*ral的帖子

我正在寻找在单个Epic redux-observable中间件中调度多个redux动作的方法.

我们假设我有以下史诗.每次SEARCH事件发生时,Epic都会从后端加载数据并调度RESULTS_LOADED操作.

searchEpic = (action$) => 
    action$
    .ofType('SEARCH')
    .mergeMap(
        Observable
        .fromPromise(searchPromise)
        .map((data) => {
            return {
                type: 'RESULTS_LOADED',
                results: data
            }
        })
    )

现在,让我们假设我需要在searchPromise解决后调度其他操作.

这样做的最简单的方法似乎是第二个史诗,它将听取RESULTS_LOADED并发送第二个动作.像这样:

resultsLoadedEpic = (action$) => 
    action$
    .ofType('RESULTS_LOADED')
    .map(({results} => {
         return {
             type: 'MY_OTHER_ACTION',
             results
         } 
    })

在这个简单的例子中,这很容易.但是当Epics成长时,我倾向于发现自己有很多redux动作,其唯一目的是触发其他动作.此外,一些rxjs代码需要重复.我发现这有点难看.

所以,我的问题是:有没有办法在一个Epic中发送多个redux动作？

TL; DRdisplay在我的CSS中更改默认属性是不好的做法吗？

问题

最近,在我们的项目中,我们必须定位2个标头标签,使它们看起来像一个.它们具有相同的字体大小和相似的样式,因此唯一的问题是如何将一个放在另一个旁边.我们有两个不同的想法,并讨论是否是一个改变默认display属性的好习惯

所以,我们非常基本的代码

<div class="container">
    <h1>Header:</h1>
    <h2>my header</h2>
</div>

我们希望得到的结果:

标题:我的标题

注意:代码需要包含2个不同的标题,因为在移动版本中我们希望在单独的行中显示它们(因此保留默认值display: block).

方法#1:使用 display: inline

这是非常直接的前进.块元素变为内联,因此它们位于同一行.这种方法的缺点是,两者的默认显示性能h1和h2发生了变化.

方法#2:使用 float

H1可以使用float: left属性定位在左侧.这种方法使默认显示属性保持不变,但如果.container不足以在单行中同时适应两个标题,则需要一些黑客攻击.

这个问题

这一切都导致了一个简单的问题:改变displayHTML元素的默认属性是不是一种坏习惯？是否违反标准,应尽可能避免？或者它是我们的面包和黄油,它并不重要,只要代码在语义上是正确的(所以标题放在h1,文章放在article等...)

如何测试(使用jest+ enzyme)以下recompose用于创建HoC的代码:

import {compose, withState, withHandlers} from 'recompose'

const addCounting = compose(
  withState('counter', 'setCounter', 0),
  withHandlers({
    increment: ({ setCounter }) => () => setCounter(n => n + 1),
    decrement: ({ setCounter }) => () =>  setCounter(n => n - 1),
    reset: ({ setCounter }) => () => setCounter(0)
  })
)

执行浅渲染时,我有权访问counter和setCounter属性,如下所示:

import {shallow} from 'enzyme'

const WithCounting = addCounting(EmptyComponent)
const wrapper = shallow(<WithCounting />)

wrapper.props().setCounter(1)
expect(wrapper.props().counter).toEqual(1)

最大的问题是,如何访问处理程序(increment,decrement和 …

在我的应用程序中，我有多个主题样式（您可以将它们视为不同的、单独的 CSS 样式文件）。我想开始使用 CSS 模块，但我什至不知道如何使用import我的第一个文件。

让我们假设以下（简单）目录结构：

layouts/
    themeA/
        myComponent.css
    themeB/
        myComponent.css
    themeC/
        myComponent.css
components/
    myComponent.js

根据用户设置，我想选择不同的 CSS。这在浏览器（或服务器）中很容易做到。但是如何将 myComponent.css 包含到 myComponent.js 中？

根据 CSS 模块，我应该import使用我正在使用的文件。所以import styles from 'theme/myComponent.css。问题是我没有一个真正的主题，而是 3 个不同的平行主题。

import styles from '' // <<<< from what?

return `<div class=${styles.caption></div>`

使用 CSS 模块时甚至可以使用多个布局/主题吗？

我有以下一段代码导致 TypeScript 编译错误：

type Promisable = (() => Promise<string>) | (() => Promise<number>);

const func = async (promisable: Promisable) => {
  await Promise.all([promisable()]);
};

错误如下

没有重载匹配这个调用。最后一次重载给出了以下错误。'(Promise | Promise)[]' 类型的参数不可分配给 'Iterable>' 类型的参数。'Symbol.iterator.next(...)' 返回的类型在这些类型之间不兼容。

作为记录，删除联合类型按预期工作：

type Promisable = () => Promise<string>;

const func = async (promisable: Promisable) => {
  await Promise.all([promisable()]);
};

你可以在这里看到的错误自己https://www.typescriptlang.org/play/?ssl=4&ssc=3&pln=1&pc=1#code/C4TwDgpgBACgTgewLYEsDOBDARgG2gXigAoiBKKfAPlkVTQgB41g4UA7Ac0vIB9iyK1eMnSM2AVyRYIcbgG4AsACgAxgjbMoAM3FsVFKBjQg9xMLXTY8ALhojMuCOSpQA3sqiGA7hhTA7dBAAdBg4OEQA2ub2VhBkALqkikoAvnJAA

是否不能将联合类型与Promise.all?

编辑：我知道可以使用类似的东西() => Promise<string|number>。但是在一个异步函数很多、类型很大的高级应用中，把函数的联合转换成联合的函数并不容易。从代码的角度来看，它也不是很实用。