Comunicação de componentes no React (react18) 04 – Introdução ao redux

1. Introdução

1.1 Outras formas de comunicação de componentes no React

• Comunicação de componentes no React 01—props .
• Comunicação de componentes no React 02 - assinatura e publicação de mensagens, cancelamento de assinatura e cancelamento de assinatura ao desinstalar o componente .
• Comunicação de componentes no React (react18) 03 - basta usar Context para passar parâmetros profundamente .

1.2 Introdução ao redux

1.2.1 Consulte o site oficial

• Para explicações e exemplos, consulte o site oficial. O endereço do site oficial é o seguinte:
  Documentação chinesa do Redux - https://www.redux.org.cn/ .

1.2.2 diagrama esquemático redux

• O diagrama esquemático é o seguinte:
  
• explicação simples
  • Para atualizar os dados no estado, você precisa iniciar uma ação. ActionApenas um objeto JavaScript simples (observou que não há mágica aqui?) Que descreve o que está acontecendo.
  • A vantagem de forçar o uso de ações para descrever todas as alterações é que você pode saber claramente o que está acontecendo na aplicação. Se algo mudar, você pode saber por quê. As ações são como indicadores que descrevem o que aconteceu.
  • Por fim, para conectar ação e estado, algumas funções são desenvolvidas, e é isso reducer. Novamente, não há mágica,redutor é apenas uma função que recebe estado e ação e retorna novo estado, e é uma função pura。
  • O estado de todo o aplicativo é armazenado em uma árvore de objetos, e essa árvore de objetos existe apenas storeem uma.

1.2.3 Introdução básica ao redux

1.2.3.1 ação

• Ação é a carga útil que transmite dados do aplicativo (não chamado de visualização aqui porque os dados podem ser resposta do servidor, entrada do usuário ou outros dados que não são de visualização) para o armazenamento. É a única fonte de dados armazenados. Geralmente você store.dispatch()passará a ação para a loja.
• As ações são essencialmente objetos JavaScript simples. Concordamos que um campo do tipo string deve ser utilizado na ação para representar a ação a ser executada. Na maioria dos casos, o tipo será definido como uma constante de string. Quando a escala do aplicativo se torna cada vez maior, é recomendado usar um módulo ou arquivo separado para armazenar ações.

1.2.3.2 armazenar

• Store é o objeto que os une. A loja tem as seguintes responsabilidades:
  • Manter o estado do aplicativo;
  • Fornece getState()métodos para obter estado;
  • Fornece dispatch(action)métodos para atualizar o estado;
  • subscribe(listener)Registre um ouvinte via ;
  • Cancelando o subscribe(listener) 返回的函数registro do ouvinte.
• Ênfase em aplicações ReduxExiste apenas uma única loja. Quando precisar dividir a lógica de processamento de dados, você deve usar combinações de redutores em vez de criar vários armazenamentos.

1.2.3.3 redutor

• Os redutores especificam como as alterações no estado da aplicação são respondidas às acções e enviadas para a loja.Lembre-se,as acções descrevem apenas o facto de algo ter acontecido,e não descrevem como a aplicação actualiza o estado.
• O redutor é uma função pura que recebe o estado e a ação antigos e retorna o novo estado.
• Todo o aplicativo possui uma única função redutora: esta função é o primeiro parâmetro passado para createStore. Em última análise, um único redutor precisa fazer o seguinte:
  • Na primeira vez que o redutor é chamado, o valor do estado é indefinido. O redutor precisa fornecer um estado padrão antes que a ação seja transmitida para lidar com esta situação.
  • O redutor precisa do estado anterior e da ação de despacho para decidir o que precisa ser feito.
  • Supondo que os dados precisem ser alterados, novos objetos ou arrays devem ser criados com os dados atualizados e retornados.
  • Se nada mudou, o próprio estado atualmente existente deverá ser retornado.

1.3 Instalar redux

• O comando é o seguinte:

  npm install --save redux
  

2. Exemplo de introdução ao Redux

• Exemplo copiado diretamente do site oficial, endereço de exemplo:
  https://www.redux.org.cn/ .
• Os exemplos são os seguintes:
  

  import {
        
         createStore } from 'redux';
  
  /**
   * 这是一个 reducer，形式为 (state, action) => state 的纯函数。
   * 描述了 action 如何把 state 转变成下一个 state。
   *
   * state 的形式取决于你，可以是基本类型、数组、对象、
   * 甚至是 Immutable.js 生成的数据结构。惟一的要点是
   * 当 state 变化时需要返回全新的对象，而不是修改传入的参数。
   *
   * 下面例子使用 `switch` 语句和字符串来做判断，但你可以写帮助类(helper)
   * 根据不同的约定（如方法映射）来判断，只要适用你的项目即可。
   */
  function counter(state = 0, action) {
        
        
    switch (action.type) {
        
        
    case 'INCREMENT':
      return state + 1;
    case 'DECREMENT':
      return state - 1;
    default:
      return state;
    }
  }
  
  // 创建 Redux store 来存放应用的状态。
  // API 是 { subscribe, dispatch, getState }。
  let store = createStore(counter);
  
  // 可以手动订阅更新，也可以事件绑定到视图层。
  store.subscribe(() =>
    console.log(store.getState())
  );
  
  // 改变内部 state 惟一方法是 dispatch 一个 action。
  // action 可以被序列化，用日记记录和储存下来，后期还可以以回放的方式执行
  store.dispatch({
        
         type: 'INCREMENT' });// 1
  store.dispatch({
        
         type: 'INCREMENT' });// 2
  store.dispatch({
        
         type: 'DECREMENT' });// 1
  

• O efeito é o seguinte:
  

3. Exemplo introdutório de Redux - otimização (redutor e armazenamento separados)

3.1 O efeito que você deseja alcançar

• Como o estado no exemplo simples acima não é renderizado na página, simplesmente o otimizamos para implementar a operação de renderização da página. O efeito desejado é o seguinte:
  

• Se escrito em reação pura, é muito simples. O código é o seguinte:

  import {
        
         useState } from "react";
  
  function CountNum(){
        
        
      const [count,setCount] = useState(0);
  
      function add(){
        
        
          setCount(count => count+1);
      }
  
      function subtract(){
        
        
          setCount(count => count-1);
      }
  
      return(
          <div>
              当前数字是：{
        
        count}
              <br /><br />
  
              <button onClick={
        
        add}>点我 +1</button> <br /><br />
              <button onClick={
        
        subtract}>点我 -1</button>
          </div>
      )
  }
  export default CountNum;
  

• Mas nosso objetivo é usar redux, então continue...

3.2 Design de código

• A estrutura do projeto é a seguinte:
  
• store.js e countReducer.js são os seguintes:
  
• Os componentes CountNumRedux.jsx são os seguintes:
  
• Olhando para o efeito, há um problema:
  
  como renderizar novamente? continuar……

3.3 Adicionar nova renderização

• Use useEffectpara renderizar novamente, o código principal é o seguinte:

  useEffect(()=>{
        
        
      store.subscribe(()=>{
        
        
          console.log('订阅更新，打印2-----',store.getState());
          setCount(store.getState());
      });
  });
  

  

• Então veja o efeito:
  

• Sobre useEffect, você pode ler o seguinte artigo:
  Comunicação de componentes no React 02 - Assinatura e publicação de mensagens, cancelamento de assinatura e cancelamento de assinatura ao desinstalar um componente .

3.4 Código anexado

• contagemReducer.js

  /**
   * 这是一个 reducer，形式为 (state, action) => state 的纯函数。
   * 描述了 action 如何把 state 转变成下一个 state。
   *
   * state 的形式取决于你，可以是基本类型、数组、对象、
   * 甚至是 Immutable.js 生成的数据结构。惟一的要点是
   * 当 state 变化时需要返回全新的对象，而不是修改传入的参数。
   *
   * 下面例子使用 `switch` 语句和字符串来做判断，但你可以写帮助类(helper)
   * 根据不同的约定（如方法映射）来判断，只要适用你的项目即可。
   */
  
  function countReducer(state = 0,action){
        
        
      console.log(`state：${
          
          state}---action：${
          
          action}---type：${
          
          action.type}`);
      switch (action.type){
        
        
          case 'INCREMENT':
              return state + 1;
          case 'DECREMENT':
              return state - 1;
          default:
              return state;
      }
  }
  export default countReducer;
  

• loja.js

  import {
        
         createStore } from 'redux';
  
  import countReducer from './countReducer.js'
  
  const store = createStore(countReducer);
  
  export default store;
  

• CountNumRedux.jsx

  import {
        
         useState,useEffect } from "react";
  import store from '../redux/store'
  
  function CountNumRedux(){
        
        
  
      const [count,setCount] = useState(0);
  
      function add(){
        
        
          // setCount(count => count+1);
          //派发action 改变内部 state 惟一方法是 dispatch 一个 action。
          store.dispatch({
        
         type: 'INCREMENT' });
      }
  
      function subtract(){
        
        
          // setCount(count => count-1);
          store.dispatch({
        
         type: 'DECREMENT' });
      }
  
      // 可以手动订阅更新，也可以事件绑定到视图层。
      // store.subscribe(() =>
      //     console.log('订阅更新，打印1-----',store.getState())
      // );
  
      useEffect(()=>{
        
        
          store.subscribe(()=>{
        
        
              console.log('订阅更新,打印2-----',store.getState());
              setCount(store.getState());
          });
      });
  
  
      return(
          <div>
              当前数字是：{
        
        count}    &nbsp;&nbsp;&nbsp;&nbsp;
              当前数字是：{
        
        store.getState()}  
              <br /><br />
  
              <button onClick={
        
        add}>点我 +1</button> <br /><br />
              <button onClick={
        
        subtract}>点我 -1</button>
          </div>
      )
  }
  
  export default CountNumRedux;