Ao criar aplicativos complexos de editor de blocos do WordPress (Gutenberg), o gerenciamento eficiente do estado torna-se crucial. É aqui que entra @wordpress/data. Ele permite que você gerencie e compartilhe o estado global em diferentes blocos e componentes em seu aplicativo WordPress.

Se você é novo no gerenciamento de estado global ou no uso de @wordpress/data, não se preocupe! Esta postagem do blog orientará você nos conceitos básicos de redutores, ações e seletores, explicando como usá-los para gerenciar o estado no WordPress.

@wordpress/data fornece uma maneira de armazenar, atualizar e acessar dados globalmente, permitindo que diferentes componentes ou blocos compartilhem e interajam com os mesmos dados.

Conceitos-chave em @wordpress/data

Para entender como usar @wordpress/data, precisamos entender três conceitos principais: redutores, ações e seletores. Eles constituem a base de como o estado é gerenciado e atualizado.

Ações:

Uma ação é como uma instrução ou comando que diz ao redutor o que fazer. É simplesmente um objeto que possui duas partes:

1. Um tipo que indica que tipo de mudança está acontecendo (por exemplo, adicionar, remover, atualizar).
2. Uma carga útil que contém os dados necessários para essa alteração (por exemplo, qual item adicionar).

Aqui está um exemplo de como as ações podem aparecer em nosso exemplo de carrinho:

const actions = {
    addToCart(item) {
        return {
            type: 'ADD_TO_CART', // Action type
            item // Payload: the item to add to the cart
        };
    },
    removeFromCart(itemId) {
        return {
            type: 'REMOVE_FROM_CART', // Action type
            itemId // Payload: the ID of the item to remove
        };
    }
};

Resumindo: As ações informam ao redutor o que precisa mudar no estado.

Redutores:

Um redutor é como um gestor do seu estado. Sempre que algo muda em seu aplicativo (por exemplo, um usuário adiciona um bloco ou desativa um recurso), o redutor escuta essa mudança e atualiza o estado de acordo.

O que um redutor faz? Ele pega o estado atual e uma ação e retorna um novo estado com base na ação.
Aqui está um exemplo de um redutor simples que gerencia um carrinho de compras:

const reducer = (state = { cart: [] }, action) => {
    switch (action.type) {
        case 'ADD_TO_CART':
            return {
                ...state, // Keep the existing state
                cart: [...state.cart, action.item] // Add the new item to the cart
            };
        case 'REMOVE_FROM_CART':
            return {
                ...state,
                cart: state.cart.filter((item) => item.id !== action.itemId) // Remove the item from the cart
            };
        default:
            return state; // Return the unchanged state for unknown actions
    }
};

Resumindo: O redutor define como o estado muda quando ações específicas são despachadas.

Seletores:

Um seletor é uma função que recupera ou seleciona dados específicos do estado. Quando seus componentes precisam acessar dados (como exibir os itens no carrinho), eles usam um seletor para buscar esses dados na loja.

Por exemplo, um seletor para obter todos os itens do carrinho pode ter esta aparência:

const selectors = {
    getCartItems(state) {
        return state.cart; // Return the cart items from the state
    }
};

Em um componente, você usaria este seletor para acessar os dados do carrinho como este:

const cartItems = useSelect((select) => select('my-store').getCartItems());

Resumindo: Um seletor é uma função auxiliar que permite acessar dados específicos do estado.

Guia passo a passo para implementar o estado global em Gutenberg com @wordpress/data

Agora que cobrimos o básico, vamos ver como você pode implementar esses conceitos em um bloco ou componente de Gutenberg. Configuraremos uma loja simples com @wordpress/data, gerenciaremos alguns estados e usaremos ações e seletores para interagir com esse estado.

Etapa 1: Defina seu estado inicial
Primeiro, precisamos definir o estado inicial da nossa loja. Estes são os dados padrão com os quais nosso aplicativo começa:

const DEFAULT_STATE = {
    cart: []
};

Etapa 2: Criar ações
A seguir, definimos as ações que utilizaremos para atualizar o estado. No nosso caso, definiremos duas ações: uma para adicionar um item ao carrinho e outra para remover um item.

const actions = {
    addToCart(item) {
        return {
            type: 'ADD_TO_CART',
            item
        };
    },
    removeFromCart(itemId) {
        return {
            type: 'REMOVE_FROM_CART',
            itemId
        };
    }
};

Etapa 3: Crie o Redutor
O redutor escuta as ações despachadas e atualiza o estado de acordo. Aqui está nosso redutor, que atualiza o carrinho quando as ações são despachadas:

const reducer = (state = DEFAULT_STATE, action) => {
    switch (action.type) {
        case 'ADD_TO_CART':
            return {
                ...state,
                cart: [...state.cart, action.item]
            };
        case 'REMOVE_FROM_CART':
            return {
                ...state,
                cart: state.cart.filter((item) => item.id !== action.itemId)
            };
        default:
            return state;
    }
};

Etapa 4: Criar seletores
Os seletores ajudam a recuperar dados específicos do estado. Por exemplo, se quisermos obter todos os itens do carrinho, criaríamos um seletor como este:

const selectors = {
    getCartItems(state) {
        return state.cart;
    }
};

Etapa 5: Crie e registre a loja
Por fim, criaremos e cadastraremos a loja com o pacote @wordpress/data. Isso tornará a loja acessível globalmente em seu site WordPress.

import { createReduxStore, register } from '@wordpress/data';

const store = createReduxStore('my-cart-store', {
    reducer,
    actions,
    selectors,
});

register(store);

Etapa 6: usando a loja em componentes
Depois que a loja estiver registrada, você poderá usá-la em seus blocos ou componentes Gutenberg. Por exemplo, para adicionar um item ao carrinho:

import { useDispatch } from '@wordpress/data';

const { addToCart } = useDispatch('my-cart-store');
addToCart({ id: 1, name: 'Sample Item' });

Para buscar os itens no carrinho:

import { useSelect } from '@wordpress/data';

const cartItems = useSelect((select) => select('my-cart-store').getCartItems());

Conclusão

Ao compreender as funções dos redutores, ações e seletores, você pode gerenciar facilmente o estado global em seus projetos WordPress Gutenberg usando @wordpress/data. Essa abordagem estruturada permite gerenciar dados com mais eficiência, tornando seus blocos e componentes mais poderosos e interativos.

Com @wordpress/data, você tem uma solução confiável e escalonável para lidar com o estado em todo o seu aplicativo WordPress. Experimente em seu próximo projeto Gutenberg!