Redux - Uso básico de componentes funcionais Redux em React

1. Introdução

Redux é um contêiner de estado para aplicativos JavaScript, fornecendo gerenciamento de estado previsível.

Seus principais métodos são os seguintes:

Os métodos importantes são dispatch（分发action）, getState（获取state）, subscribe（监听state的变化）, que serão apresentados a seguir, e os outros dois podem ser ignorados;

---

Então, quando usar o Redux?

Ao encontrar os seguintes problemas, é recomendável começar a usar Redux:

1. Você tem muitos dados que mudam com o tempo
2. Você quer que o estado tenha uma única fonte de verdade
3. Você acha impossível gerenciar todo o estado em componentes de nível superior

Em segundo lugar, instale

O que instalei aqui é "redux": "^4.2.1"a versão;

npm install redux --save

store文件夹Novo e no diretório src do projeto index.js，reducer.js; como segue:

Três, os três conceitos principais Loja, Ação, Redutor

3.1 Loja

Armazenar: onde os dados são armazenados. É melhor ter apenas uma Loja para todo o aplicativo.

createStore(): Usado para gerar Loja. Recebe um Redutor como argumento.

index.js

/**
 * 引入createStore 专门创建最为核心的store对象
 * 目前createStore已经弃用，所以我们要引用legacy_createStore 
 */

iimport {
    
     legacy_createStore } from "redux";
import reducer from './reducer.ts'

// 创建数据仓库 引入reducer函数进行对数据的处理
const store = legacy_createStore(reducer)

export default store

3.2 Redutor

A essência da redução é uma função usada para inicializar o estado e o estado do processo.

A função de redução recebe dois parâmetros, o primeiro parâmetro é o valor inicial do estado, o segundo parâmetro é um objeto de ação, o primeiro atributo no objeto é o nome da função typee o segundo atributo é o valor passado, por mudanças de estado subsequentes;

redutor.ts

// 约束类型
interface Eula {
    
    
  name: string;
  age: number;
}
// 定义数据
const defaultState: Eula = {
    
    
  name: "Eula",
  age: 18
};

// reducer 函数 用于更改数据
let reducer = (preState = defaultState, action: {
     
      type: string; data: number }) => {
    
    
  // action解构出来
  let {
    
     type, data } = action;

  // 第一种写法 每个分支使用return进行返回
  // switch (type) {
    
    
  //   case "update_age":
  //     preState.age = data;
  //     return preState;
  //   case "add_age":
  //     preState.age++;
  //     return preState;
  //   case "del_age":
  //     preState.age--;
  //     return preState;
  //   default:
  //     return preState; // 初始化时
  // }

  // 第二种写法 break 与最终的return返回结果
  switch (type) {
    
    
    case "update_age":
      preState.age = data;
      break;
    case "add_age":
      preState.age++;
      break;
    case "del_age":
      preState.age--;
      break;
    default:
      preState; // 初始化时
  }
  return preState;  // 此处 一定要使用return进行返回最终改变的值
};

export default reducer;

Nota: Quando o Store é carregado pela primeira vez, ele chamará automaticamente o Redutor uma vez para inicializar o estado. Neste momento, o estado é indefinido e o tipo no objeto de ação é @@redux/INITxxx. Chamadas manuais store.dispatch()também acionarão a execução automática do Redutor.

3.3 Ação

Action é um objeto JS comum, usado para descrever o tipo de dados e o conteúdo a ser atualizado. O atributo type é obrigatório, indicando o nome da Action, e outros atributos podem ser definidos livremente.

redux.tsx

// 引入store
import store from "../../../store/index";
// 更改数据时调用
store.dispatch({
    
     type: "update_age", data: 100 });

store.dispatch(): Todas as alterações de dados devem ser atualizadas por meio do envio de Ações. Aceita um objeto Action como parâmetro e o envia.

Quarto, comece a usar componentes funcionais

redux.tsx

import React, {
    
     useState } from "react";
//  1，引入store
import store from "../../../store/index";

// 渲染数据
const myList:[] = [];

const Redux: React.FC = () => {
    
    
  let [list, setList] = useState(myList);
  console.log("store:", store);

  // 监听数据的变化
  const unsubscribe = store.subscribe(() => {
    
    
    console.log("订阅数据的变化", store.getState());
    // 此处用来触发视图的更新
    setList([]);
  });

  // 改变store中的数据
  const update = () => {
    
    
    store.dispatch({
    
     type: "update_age", data: 100 });
  };
  const add = () => {
    
    
    store.dispatch({
    
     type: "add_age" });
  };
  const del = () => {
    
    
    store.dispatch({
    
     type: "del_age" });
  };

  // 此处才是真正渲染的页面
  return (
    <div className="redux">
      <h3>redux演示</h3>
      <button onClick={
    
    update}>更改store的数据+100</button>
      <button onClick={
    
    add}>更改store的数据++</button>
      <button onClick={
    
    del}>更改store的数据--</button>
      <p>store的num数据：{
    
    store.getState().age}</p>
    </div>
  );
};
export default Redux;

Renderizações:

O componente acima é uma demonstração de caso simples, que define três eventos de clique, clique no primeiro botão state.age+100, clique no segundo botão de cada vez state.age+1e clique no terceiro botão para diminuir a idade em um de cada vez; a seguir apresentará vários conteúdos principais em detalhes:

4.1, apresente a loja

Traga primeiro, não há nada a dizer sobre isso;

import store from "../../../store/index";

4.1, método store.getState()

getState()O método é um dos métodos da instância redux, e a primeira captura de tela acima foi impressa por meio da instância store;

getState()A função é obter o estado rodando em redux no estado atual, ou seja, obter os dados mais recentes do armazenamento;

   <p>store的num数据：{
    
    store.getState().age}</p>

4.3, método store.dispatch()

dispatch()é o único comportamento que pode modificar os dados de estado. Através da distribuição action (na verdade um objeto), o novo estado é calculado com a ação e seu payload passado pela função de despacho, e atualizado para os dados de fechamento, realizando assim a atualização do estado;

Como segue:
redutor.tsx

  // 改变store中的数据
  const update = () => {
    
    
    store.dispatch({
    
     type: "update_age", data: 100 });
  };
  const add = () => {
    
    
    store.dispatch({
    
     type: "add_age" });
  };
  const del = () => {
    
    
    store.dispatch({
    
     type: "del_age" });
  };

switch caseO código acima corresponderá ao julgamento da expressão a seguir type, uma por uma, e é utilizado para atualizar o estado;

redutor.ts

let reducer = (preState = defaultState, action: {
     
      type: string; data: number }) => {
    
    
  let {
    
     type, data } = action;
  
  // 第一种写法 每个分支使用return进行返回
  // switch (type) {
    
    
  //   case "update_age":
  //     preState.age = data;
  //     return preState;
  //   case "add_age":
  //     preState.age++;
  //     return preState;
  //   case "del_age":
  //     preState.age--;
  //     return preState;
  //   default:
  //     return preState; // 初始化时
  // }

  // 第二种写法 break 与最终的return返回结果
  switch (type) {
    
    
    case "update_age":
      preState.age = data;
      break;
    case "add_age":
      preState.age++;
      break;
    case "del_age":
      preState.age--;
      break;
    default:
      preState; // 初始化时
  }
  return preState;  // 此处 一定要使用return进行返回最终改变的值
};

Os dois métodos de escrita acima são iguais; compare;

4.4, método store.subscribe()

subscribeEnquanto os dados de estado na loja mudarem, a função irá acionar subscribeo método, o que equivale a registrar um ouvinte; monitorar as mudanças de dados na loja;

Do ponto de vista do react, o armazenamento de redux está isolado. Precisamos de uma ponte para atualizar a lógica da camada UI enquanto a camada de dados é atualizada. Neste momento, o último método na loja, o método subscribe, é útil .

Nota: setList([]): é um método para acionar ativamente a atualização da visualização de reação, caso contrário, os dados na loja mudam, mas a visualização não é renderizada novamente.

import React, {
    
     useState } from "react";
const Redux: React.FC = () => {
    
     
  let [list, setList] = useState(myList);
// 监听数据的变化
  const unsubscribe = store.subscribe(() => {
    
    
    console.log("订阅数据的变化", store.getState());
    // 此处用来触发视图的更新
    setList([]);
  });
}

subscribeEle também retorna uma função de cancelamento de assinatura. Quando não quisermos mais assinar este ouvinte, chame-o unsubscribe()e a função correspondente será removida da fila do ouvinte.

unsubscrib() // 不再监听

Cinco, os três princípios do Redux

1. Fonte de dados única: o estado de todo o aplicativo é armazenado em uma árvore de objetos, e essa árvore de objetos é armazenada apenas em um armazenamento. Uma única fonte de dados pode facilitar a manutenção, modificação e rastreamento do estado de todo o aplicativo.
2. O estado é somente leitura: a única maneira de modificar o estado é acionar uma ação, não tente modificar o estado de nenhuma outra forma. Isto garante que todas as modificações sejam processadas centralmente e executadas em ordem estrita.
3. Use funções puras para realizar modificações: conecte o antigo Estado e Ação através de um Redutor e retorne um novo Estado. Todos os Redutores devem ser funções puras, sem quaisquer efeitos colaterais.

Fim:

---

[site chinês redux] : https://cn.redux.js.org/