react-ramda.md

React + Ramda

Programação funcional

"Programação funcional é um paradigma de programação que trata a computação como uma avaliação de funções matemáticas e que evita estados ou dados mutáveis. Ela enfatiza a aplicação de funções, em contraste da programação imperativa, que enfatiza mudanças no estado do programa."

Fantasy land

É uma especificação para interoperabilidade entre bibliotecas utilizando programação funcional baseada em teoria das categorias

Ramda

JavaScript é uma linguagem multiparadigma, ou seja, aceita vários paradigmas... ... e Ramda é uma biblioteca baseada no paradigma funcional para JavaScript.

Ramda é, basicamente, um conjunto de funções enfatizadas no paradigma funcional, que não tem efeitos colaterais nem mutabilidade.

yarn add ramda

Categorias

• Funções
• Listas
• Lógicos
• Números
• Objetos
• Strings

Exemplos:

• https://goo.gl/79CQXV
• https://goo.gl/fQNaHT

Funções complementares

• T e F
• add e subtract
• all e none
• append e prepend
• apply e unapply
• ascend e descend
• assoc e dissoc
• compose e pipe
• curry e uncurry
• dec e inc
• either e both
• filter e reject
• fromPairs e toPairs
• gt e lt (e derivações)
• head e last
• init e tail
• join e split
• max e min (e derivações)
• mergeLeft e mergeRight
• pick e omit
• take e drop
• then e otherwise (para Promises)
• toLower e toUpper
• when e unless

Ramda + React

Podemos utilizar Ramda ao:

• Atualizar o estado da aplicação:

handleToggleChecked = () => {
    this.setState(evolve({ checked: not }))
}

• Filtrar os resultados de uma lista:

getBrowseItems = options => {
    const { searchText = '' } = this.props

    return options
        .filter(
            pipe(
                values,
                map(toLower),
                any(contains(toLower(searchText)))
            )
        )
}

• Ordenar uma lista:

render = () => {
    const { options } = this.props
    const items = this.getBrowseItems(options)
    const sortByName = sortBy(prop('name'))

    return sortByName(items).map(item =>
        // Items here
    )
}

• Validar um formulário:

isFormValid = data => {
    const isFilled = complement(isEmpty)

    return where({
        email: isFilled,
        password: isFilled
    })(data)
}

• Controlar o que será renderizado:

render = () => {
    return cond([
        [equals(SUCCESS_SCREEN), this.renderSuccesScreen],  
        [equals(ERROR_SCREEN), this.renderErrorScreen],  
        [T, this.renderForm],  
    ])(this.state.screen)
}

... praticamente e qualquer situação de manipulação de dados, seja em Classes, SFCs ou Hooks.

É isso!

Marcelo Camargo e William Rozin Gaspar

2019