Preact e Preact-Redux

Responsive image

Bem pessoal, ficamos um tempo sem postar nada, mas voltamos a ativa e dessa vez com um artigo bacana sobre preact sim o framework parecido com react, e muito bacan entao porque nao usar ?

vamos começar iremos usar o preact-cli onde ja vem com uma estrutura pre configurada.

preact create default preact-redux-exemplo
cd preact-redux-exemplo
npm i preact-redux redux

para deixar nossa app organizada vamos criar 2 pastas

cd src
mkdir actions
mkdir reducers

na pasta reducer iremos ter 3 arquivos

touch store.js
touch reducers.js
touch contador.js

no store.js

import { createStore } from 'redux';
import { COUTER } from './contador'

const  ACTIONS = {
    COUTER
}

const INITIAL = {
    contador: 0
};

export default createStore( (state, action) => (
    action && ACTIONS[action.type] ? ACTIONS[action.type](state, action) : state
), INITIAL, typeof devToolsExtension==='function' ? devToolsExtension() : undefined);

nesse arquivo temos o valor inicial do nosso contador sendo 0, temos tambem a chamada para o reducer onde controlaremos o estado do contador, e temos a chamada para o redux dev tools, para ajudar no debug.

em reducer.js

const EMPTY = {};

export default store => store || EMPTY;

Nosso proximo arquivo sera o couter.js

export  const COUTER = ({contador,...state},{data}) =>({ contador:data,...state});

vamos agora apagar alguns arquivos que nao queremos usar.

na pasta src/components

rm -rf header

na pasta src/routes

rm -rf *

vamos criar nossas actios na pasta, src/actions iremos criar o arquivo contador.js

export const add = (data) => ({
    type:"COUTER",
    data
})

agora vamos criar em components a pasta contador, com o arquivo index.js dentro

import {h, Component } from 'preact'
import { connect } from 'preact-redux';

import *  as actions   from '../../actions/contador'
import reduce  from '../../reducers/reducers'

@connect(reduce, actions)

export default class Contador extends Component{

    handlerAdd = () =>{

        let data = this.props.contador++;
        this.props.add(data)
    }
    render({contador}){
        return(
            <div>
            <label>{contador}</label>
            <button onClick={this.handlerAdd} >add </button>
            </div>
        )
    }
}

percebam que o contador passado para render, é o contador do nosso state no redux. agora vamos alterar nossa app.js

import { h, Component } from 'preact';
import { Router } from 'preact-router';
import Contador from './contador';

if (module.hot) {
    require('preact/debug');
}

export default class App extends Component {
    /** Gets fired when the route changes.
     *  @param {Object} event       "change" event from [preact-router](http://git.io/preact-router)
     *  @param {string} event.url   The newly routed URL
     */
    handleRoute = e => {
        this.currentUrl = e.url;
    };

    render() {
        return (
            <div id="app">
                <Router onChange={this.handleRoute}>
                    <Contador path="/" />
                </Router>
            </div>
        );
    }
}

e finalizando nosso exemplo, basta alterar nosso index.js na raiz de src.

import './style';
import { Provider } from 'preact-redux';
import store from './reducers/store';
import App from './components/app';

export default () => (
        <Provider store={store}>
            <App />
        </Provider>
);

preact-e-preact-redux