Explicação detalhada do uso básico do Redux (dificuldade no jardim de infância, desde que você tenha mãos)

Explicação detalhada do processo básico de uso do Redux

documentos de aprendizagem

Documentação em chinês: http://www.redux.org.cn/
Documentação em inglês: https://redux.js.org/
Github: https://github.com/reactjs/redux

Primeiro, o que é redux

1. Introdução:

1. redux é uma 状态管理biblioteca JS dedicada a fazer coisas (不是react插件库).
2. Pode ser usado em react, angular, vueprojetos como 基本与react配合使用.
3. Função: Gerenciamento centralizado de aplicativos de reação 多个组件共享的状态.

2. Em que circunstâncias você precisa usar redux

1. O estado de um componente precisa estar disponível para outros componentes 随时拿到（共享）.
2. Um componente precisa alterar o estado de outro componente ( 通信).
3. Princípio geral: 能不用就不用, se não for usado 比较吃力才考虑使用.

3. Fluxo de trabalho Redux

Dois, os três conceitos centrais do redux

1, ação

1. objeto de ação
2. Contém 2
   tipos de atributos: atributo de identificação, valor é string, exclusivo, dados de atributo necessários
   : atributo de dados, tipo de valor é arbitrário, atributo opcional
3. Exemplo: { type: 'ADD_STUDENT', data:{name: 'tom', age:18} }

2, redutor

1. É usado para estado de inicialização e estado de processamento.
2. Durante o processamento, uma função pura que gera um novo estado com base no antigo estado e na ação.

3, armazenar

1. O objeto que une estado, ação e redutor
2. Como conseguir este objeto?

import {
    
    createStore} from 'redux'
import reducer from './reducers'
const store = createStore(reducer)

3. A função deste objeto?
   getState(): obtém o estado
   dispatch(action): distribui a ação, aciona a chamada do redutor, gera um novo estado
   Subscribe(listener): registra o listener, quando um novo estado é gerado, ele será chamado automaticamente

Três, a API principal do redux

1，criarloja()

Função: Criar um objeto de armazenamento contendo o redutor especificado

2, armazenar objeto

1. Função: o principal objeto de gerenciamento da biblioteca redux
2. Mantém internamente:

redutor de estado

3. Método principal:

getState()
dispatch(ação)
inscreva-se(ouvinte)

4. Codificação específica:

store.getState()
store.dispatch({type:'INCREMENT', number})
store.subscribe(render)

3, apliqueMiddleware()

Função: middleware baseado em Redux (biblioteca de plug-ins) no aplicativo

4，combineReducers()

Função: Mesclar várias funções redutoras

Quarto, use redux para escrever aplicativos

1. Instale

npm install --save redux

2. Crie um novo arquivo

No caminho src, crie um novo arquivo de armazenamento

3. Defina o armazém:

novo src/store/index.js

// 定义仓库
// 引入configureStore 定义仓库
import {
    
     configureStore } from "@reduxjs/toolkit";
// 导入counterSlice
import counter from "./counterSlice";
// 导出
export const store = configureStore({
    
    
  // 数据处理
  reducer: {
    
    
    counter
  }
});

4. Como criar dados do contador e modificar dados:

Novo src/store/counterSlice.js

// 创建计数器切片slice
// 导入创建切片的函数
import {
    
     createSlice } from "@reduxjs/toolkit";
// 定义初始化状态
const initialState = {
    
     value: 0 };
// 创建切片
const counterSlice = createSlice({
    
    
  // 切片名称
  name: "counter",
  // 初始化状态
  initialState,
  // 定义处理器
  reducers: {
    
    
    // 处理加法
    increment: state => {
    
    
      state.value += 1;
    },
    // 处理减法
    decrement: state => {
    
    
      state.value -= 1;
    },
    // 处理加法
    addValue: (state, action) => {
    
    
      state.value += action.payload;
    }
  }
});

// 导出动作
export const {
    
     increment, decrement, addValue } = counterSlice.actions;
// 导出处理器
export default counterSlice.reducer;
// 导出异步操作动作
export const syncAddvalue = value => dispatch => {
    
    
  setTimeout(() => {
    
    
    dispatch(addValue(value));
  }, 2000);
};

5. Use redux em componentes

arquivo src/views/ProductView.js:

import {
    
    
  increment,
  decrement,
  addValue,
  syncAddvalue
} from "../store/counterSlice";
import {
    
     useSelector, useDispatch } from "react-redux";
const ProductView = () => {
    
    
  // 获取仓库数据
  const count = useSelector(state => state.counter.value);
  // 获取修改仓库数据的工具
  const dispatch = useDispatch();
  return (
    <div>
      <p>
        仓库数据：{
    
    count}
      </p>
      <button onClick={
    
    () => dispatch(increment())}>+1</button>
      <button onClick={
    
    () => dispatch(decrement())}>-1</button>
      <button onClick={
    
    () => dispatch(addValue(5))}>+5</button>
      <button onClick={
    
    () => dispatch(syncAddvalue(10))}>两秒后+10</button>
    </div>
  );
};

export default ProductView;

Renderizações:

Cinco, programação assíncrona redux

1. Entenda:

1. O Redux não pode executar processamento assíncrono por padrão.
2. Às vezes, o aplicativo precisa estar em redux中执行异步任务(ajax, timer)

2. Use middleware assíncrono

npm install --save redux-thunk

Seis, reagir-redux

1. entender

1. Uma biblioteca de plug-ins de reação
2. Projetado especificamente para simplificar o uso de redux em aplicativos de reação

2. react-Redux divide todos os componentes em duas categorias

1. componentes da interface do usuário

1. É responsável apenas pela renderização da interface do usuário sem qualquer lógica de negócios
2. Receber dados através de props (dados gerais e funções)
3. Não usa nenhuma API Redux
4. Geralmente salvo na pasta de componentes

2. componente do contêiner

1. Responsável pelo gerenciamento de dados e lógica de negócios, não responsável pela apresentação da interface do usuário
2. APIs usando Redux
3. Geralmente salvo na pasta de contêineres

3. APIs relacionadas

1. Provedor: permite que todos os componentes obtenham dados de estado

<Provider store={
    
    store}>
  <App />
</Provider>

2. connect: Usado para agrupar componentes de interface do usuário para gerar componentes de contêiner

import {
    
     connect } from 'react-redux'
  connect(
    mapStateToprops,
    mapDispatchToProps
  )(Counter)

3. mapStateToprops: converte dados externos (ou seja, objetos de estado) em propriedades de rótulo de componentes de interface do usuário

const mapStateToprops = function (state) {
    
    
  return {
    
    
    value: state
  }
}

4. mapDispatchToProps: Converta a função de dispatching action para o atributo label do componente UI

Sete, use a ferramenta de depuração redux

1. Instale o plug-in do navegador Chrome

2. Baixe o pacote de dependência da ferramenta

npm install --save-dev redux-devtools-extension

Oito, funções puras e funções de ordem superior

1. Funções puras

1. Um tipo especial de função: desde que seja a mesma entrada (parâmetro real), deve obter a mesma saída (retorno)
2. As seguintes restrições devem ser observadas

1. Não substitua os dados do parâmetro
2. Não produz nenhum efeito colateral, como solicitações de rede, dispositivos de entrada e saída
3. Métodos de impureza como Date.now() ou Math.random() não podem ser chamados

3. A função redutora do redux deve ser uma função pura

2. Funções de ordem superior

1. Compreensão: uma classe especial de funções

   1. Caso 1: O parâmetro é uma função
   2. Caso 2: O retorno é uma função

2. Funções comuns de ordem superior:

   1. Função de configuração do temporizador
   2. Arrays forEach()/map()/filter()/reduce()/find()/bind()
   3. promessa
   4. A função de conexão no react-redux

3. Papel: pode alcançar funções mais dinâmicas e mais escaláveis