Realização de conexão e provedor em react-redux

conectar

Em primeiro lugar, se a aplicação de redux in react for implementada normalmente. Pegue o componente de classe como exemplo,

1. Geralmente, eu ouvi this.stae = {storeState: store.getState ()} no construtor () para obter o valor do estado em redux
2. Em seguida, use métodos para despachar ações, como eventos de clique, e então acione stote.patch (ação) .Após ouvir despachar, modifique o valor de estado em redux.
3. Então, em componentDidMount, monitorando store.subscribe (() => {this.setState ()}) para modificar o estado do componente de classe em tempo real.
4. E você precisa registrar o ouvinte em componentWillUnmount ().
   Se for esse o caso, cada componente escreverá códigos semelhantes repetidos, resultando em redundância de código e manutenção inconveniente.
   react-redux fornece conexão de componentes de alto nível para nos ajudar a completar as operações acima de forma concisa e conveniente.

A maioria dos componentes de alto nível são na verdade uma função. Esta função permite que você passe um componente e crie um novo componente internamente. Use o componente passado como um subcomponente do novo componente. Além disso, alguns novos componentes são adicionados Algumas coisas, como fazer outras coisas na função do ciclo de vida, passar mais adereços, etc., disfarçam-se para melhorar os componentes que você passa, de modo que esse componente comum se torne colorido após ser modificado por componentes de alto nível. Colorido.

Connect também faz a mesma coisa, vamos definir uma função de conexão primeiro.

Esta é a conexão mais fácil e agora está melhorando gradualmente suas funções. O primeiro são dois parâmetros, usamos A e B em vez disso, geralmente
A é

const mapStateToProps = state => {
    
    
  return {
    
    
    counter: state.counter
  }
}

Uma função de seta, este estado é o valor que queremos passar depois de um tempo, basta saber como ele se parece.
B é

const mapDispatchToProps = dispatch => {
    
    
  return {
    
    
    addNumber: function(number) {
    
    
      dispatch(addAction(number));
    }
  }
}

Precisamos apenas saber que existem duas funções de seta.
Precisamos saber por que há conexão, porque não queremos escrever store.subcribe e importar store em componentDidUnmonut em cada componente. Portanto, temos que escrever essas etapas em nosso Componentes de última geração, conectando. Vamos dar uma
olhada no código.

Vamos dar uma olhada na operação Sao. Usamos um recurso de componentes de alto nível para passar adereços para passar seletivamente os dados na loja e alguns métodos de ação para nossos componentes, para que não t necessidade de usá-los em nossos componentes .Loja introduzida.
Neste momento, observe nossos dois parâmetros.

Podemos escolher passar o contador para nosso componente sem passar outros dados ou escolher passar addNumber para o componente sem passar outros métodos. Dessa forma, o componente pode obter o valor na loja por meio de this.props.counter.

Mas isso é apenas uma transição, não há monitoramento e modificação dos dados que apenas queríamos. Na verdade, você só precisa inicializar os dados por meio do construtor no componente retornado por conectar, monitorar a mudança de valor por meio da função de ciclo de vida, alterar o valor por meio de this.setState () e renderizar novamente, o que equivale a nos ajudar dentro da conexão. Para monitorar e alterar, não precisamos adicioná-los manualmente. Olhe o código

Mas, então, temos que apresentá-la nós mesmos. Se encapsularmos essa função em uma biblioteca, precisamos que os usuários modifiquem seu código-fonte? Obviamente, isso não é realista, então o que devo fazer?
Neste momento, devemos usar nosso objeto de contexto.
Em primeiro lugar, crie o nosso objeto de contexto.
Na verdade, a ideia surgiu neste momento. Só precisamos dela.
Depois, só precisamos
passar da loja que queremos para o valor no arquivo de índice da entrada . Neste momento , só precisamos modificar a função de conexão. O código, altere tudo sotre para this.context, de

modo que nosso pacote de conexão seja basicamente concluído.
Na verdade, o conncet e o Provider no react-redux também são os mesmos, mas ele faz mais coisas, e sua loja é passada para a loja, não o valor.