entender

1) Documentos de aprendizagem

Documentação em inglês: https://redux.js.org/

Documentação chinesa: https://www.redux.org.cn/

github: https://github.com/react.js/redux

2) O que é redux

redux é uma biblioteca JS dedicada ao gerenciamento de estado (não uma biblioteca de plugins de reação)

Pode ser usado em projetos react, angular, vue e outros, mas basicamente funciona com react

Função: gerenciamento centralizado do estado compartilhado por vários componentes no aplicativo react

3) Quando usar redux

O estado de um determinado componente precisa ser obtido (compartilhado) por outros componentes a qualquer momento

Um componente precisa alterar o estado de outro componente (comunicação)

Princípio geral: se você pode usar, não pode usar. Se não precisa trabalhar muito, pode considerar usá-lo

4) diagrama do princípio redux

Três conceitos básicos de redux

1）ação

A. Objeto de ação

B. Contém dois atributos

tipo: atributo de identificação, o valor é uma string, único, atributo obrigatório

dados: atributo de dados, o valor é de qualquer tipo, atributo opcional

Exemplo:{tipo: 'ADD_STUDENT ', dados:{nome:'tom', idade:18}}

2) redutor

A. Usado para estado de inicialização e estado de processamento

B. Uma função pura que gera um novo estado com base no antigo estado e ação durante o processamento

3）loja

A. O objeto que vincula estado, ação e redutor

B. Como obter este objeto

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

C. A função deste objeto

getState(): obtém o estado

despacho (ação): Distribuir ação, acionar redutor, gerar novo estado

subscribe(listenr): registrador listener, quando um novo estado for gerado, ele será chamado automaticamente

Nota: Antes de usar o redux, você deve primeiro instalar o redux: npm i redux

Caso de soma - versão clássica redux

1) Remova o estado do próprio componente Count

2) Crie em .src

-src -pasta rudex

-store.js

-count_reducer.js

3）store.js

A. Apresente a função createStore em redux para criar uma loja

B. Quando createStore é chamado, um redutor que o atende deve ser passado

C. Lembre-se de expor o objeto store

/*
 该文件专门用于暴露一个store对象，整个应用只有一个store对象
*/
//引入createStore，专门用于创建redux中最为核心的store对象
import {createStore} from 'redux'

//引入为Count组件服务的reducer
import countReducer from './count_reducer'

export default createStore(countReducer)

4）count_reducer.js

A. A essência do redutor é uma função que recebe: PreState, ação e retorna a função processada

B. O redutor tem duas funções: estado de inicialização e estado de processamento

C. Quando o redutor é chamado pela primeira vez, ele é automaticamente acionado pelo armazenamento e o pré-estado passado é indefinido

/*
 1.该文件用于创建一个为count组件服务的reducer，reducer的本质就是一个函数
 2.reducer函数会接到两个参数，分别是之前的state(状态)和action(动作对象)
*/

const initState = 0
export default function countReducer(preState=initState, action) {
  console.log(preState, action);
  //从action对象中获取type, data
  const {type, data} = action
  //根据type类型决定如何加工
  switch (type) {
    case 'increment':// 如果是加
     return preState + data
    case 'decrement':// 如果是减
      return preState - data
    default:
      return preState

 }
}

5) Detecte a mudança de estado na loja em index.js e renderize novamente assim que o som mudar

Observações: redux é responsável apenas pela gestão do estado. Quanto à exibição das páginas orientadas pelo estado, cabe a nós

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App.jsx'
import store from './redux/store'

ReactDOM.render(<App/>,document.getElementById('root'))

store.subscribe(() => {
  ReactDOM.render(<App/>,document.getElementById('root'))
})

Caso de soma – versão completa do redux

novo arquivo

1.count_actions, js, é especialmente usado para criar objetos de ação, que é essencialmente um objeto

2.constants.js, coloque o tipo na ação errada devido a negligência de codificação

contagem_ação.js

/*
 该文件专门为count组件生成action对象
*/

import { INCREMENT, DECREMENT } from "./constant"

//完整写法
// function createIncrementAction(data) {
//   return {type:'increment', data }
// }

//简写形式
export const createIncrementAction = data =>( {type:INCREMENT, data })

//完整写法
// function createDecrementAction(data) {
//   return {type:'decrement', data}
// }

export const createDncrementAction = data =>( {type: DECREMENT, data })

constantes.js

/*
 该文件是用于定义action对象中的type类型的常量值
 目的只有一个：防止程序员在编码的同时单次写错
*/

export const INCREMENT = 'increment'

export const DECREMENT = 'decrement'

Exemplo de código completo

loja.js

/*
  该文件专门用于暴露一个store对象，整个应用只有一个store对象
*/

//引入createStore，专门用于创建redux中最为核心的store对象
import {createStore} from 'redux'

//引入为Count组件服务的reducer
import countReducer from './count_reducer'

export default createStore(countReducer)

contagemReducer.js

/*
  1.该文件用于创建一个为count组件服务的reducer，reducer的本质就是一个函数
  2.reducer函数会接到两个参数，分别是之前的state(状态)和action(动作对象)
*/
import { INCREMENT, DECREMENT } from "./constant";

const initState = 0
export default function countReducer(preState=initState, action) {
  console.log(preState, action);
  //从action对象中获取type, data
  const {type, data} = action
  //根据type类型决定如何加工
  switch (type) {
    case INCREMENT:// 如果是加
     return preState + data
    case DECREMENT:// 如果是减
      return preState - data
    default:
      return preState
  }
}

constante.js

/*
  该文件是用于定义action对象中的type类型的常量值
  目的只有一个：防止程序员在编码的同时单次写错
*/

export const INCREMENT = 'increment'
export const DECREMENT = 'decrement'