1
resposta

Estado inicial com dados dinâmicos

Olá, fiquei com uma dúvida, é possível que eu crie o estado inicial do reducer com dados vindos de uma base de dados por exemplo? ou retornados de uma api?

E também, é possível utilizar as chamadas e hooks do redux dentro de classes do React/Next ou apenas em componentes 'client' ?

1 resposta

Sim, você pode criar o estado inicial de um reducer com dados provenientes de uma base de dados ou retornados de uma API. Na verdade, essa é uma prática comum, especialmente ao usar Redux em conjunto com aplicativos que precisam de dados dinâmicos. Aqui está um exemplo de como você pode fazer isso:

javascript Copy code // initialState.js

// Supondo que você tenha obtido os dados da base de dados ou da API const dadosIniciais = { usuarios: [ { id: 1, nome: 'Usuário 1', email: 'usuario1@example.com' }, { id: 2, nome: 'Usuário 2', email: 'usuario2@example.com' }, // Outros usuários... ], // Outros dados... };

export default dadosIniciais; javascript Copy code // reducer.js

import dadosIniciais from './initialState';

const initialState = { ...dadosIniciais, // Outros estados iniciais... };

const meuReducer = (state = initialState, action) => { // Lógica do reducer... };

export default meuReducer; Isso permitirá que você comece com um estado inicial preenchido com os dados obtidos da base de dados ou da API.

Quanto à sua segunda pergunta, sim, é possível usar Redux e seus hooks em classes do React e do Next.js, não apenas em componentes funcionais. Você pode usar os hooks do Redux, como useDispatch e useSelector, em componentes funcionais e a API do Redux, como connect, em componentes de classe. Aqui está um exemplo de como você pode usar Redux em uma classe do React:

javascript Copy code import React, { Component } from 'react'; import { connect } from 'react-redux'; import { bindActionCreators } from 'redux'; import { minhaAcao } from './actions';

class MeuComponente extends Component { componentDidMount() { // Disparando uma ação ao montar o componente this.props.minhaAcao(); }

render() { return (

{/* Conteúdo do componente */}
); } }

const mapStateToProps = (state) => ({ // Mapeando o estado para as props do componente // state.propriedade corresponde à propriedade do estado no rootReducer // Exemplo: state.usuario corresponde ao estado do usuário propriedade: state.propriedade, });

const mapDispatchToProps = (dispatch) => bindActionCreators({ minhaAcao }, dispatch);

export default connect(mapStateToProps, mapDispatchToProps)(MeuComponente); Espero que isso esclareça suas dúvidas! Se precisar de mais alguma coisa, estou à disposição.