Comunicação de componentes no React (react18) 06 - redux-toolkit + react-redux
- 2. Exemplo inicial - exemplo de site oficial
- 3. Exemplo 2 – Pequeno exemplo prático
- 4. Sobre carga útil - carga útil
- 5. Código do projeto
1. Introdução
1.1 redux e react-redux
- Os dois artigos anteriores foram apresentados. Se precisar, clique para dar uma olhada:
Comunicação de componentes no React (react18) 04 - Introdução ao redux .
Comunicação de componentes no React (react18) 05 - redux ➕ react-redux ( incluindo compartilhamento de dados) .
1.2 Sobre o kit de ferramentas redux
1.2.1 Site oficial
1.2.2 Por que usar o Redux Toolkit?
- Em primeiro lugar, o que diz o site oficial?
- Veja então que createStore foi descontinuado em nosso código, conforme segue:
1.3 Instalar o kit de ferramentas Redux
- O comando de instalação é o seguinte
npm install @reduxjs/toolkit yarn add @reduxjs/toolkit - Se o projeto não tiver instalado o react-redux, você poderá instalar os dois juntos, mas não há necessidade de instalar o redux separadamente
react-redux + redux-toolkit.react-redux + reduxnpm install @reduxjs/toolkit react-redux yarn add @reduxjs/toolkit react-redux
1.4 APIs relacionadas ao Redux Toolkit
-
Vamos apresentar brevemente alguns
-
O site oficial está cheio, então acesse o site oficial
2. Exemplo inicial - exemplo de site oficial
- Para o processo, consulte o endereço oficial abaixo:
https://cn.react-redux.js.org/tutorials/quick-start/ .
2.1 Criar Loja Redux
- Importe a API configureStore do Redux Toolkit. Começaremos criando uma loja Redux vazia e exportando-a da seguinte forma:
import { configureStore } from '@reduxjs/toolkit'; export default configureStore({ reducer: { }, }); - Isso criará uma loja Redux eConfigurar automaticamente extensões Redux DevTools, para que você possa verificar a loja durante o desenvolvimento.
2.2 Fornecer Redux Store para React
- Apenas mantenha isso inalterado como antes, da seguinte maneira:
2.3 Criar Fatia de Estado Redux
2.3.1 arquivo counterSlice.js
- A criação de uma fatia requer um nome de string para identificar a fatia, um valor de estado inicial e uma ou mais funções redutoras que definem como atualizar o estado. Depois de criar a fatia, podemosExporte os criadores de ação Redux gerados e toda a função de redução de fatia。
- do seguinte modo:
2.3.2 Compare ações e redutores anteriores
- O método de escrita de ação anterior é o seguinte:
function incrementOne(){ type:'INCREMENT_ONE' } function incrementNumber(number){ type:'INCREMENT_NUMBER', number:number } export default{ incrementOne,incrementNumber} - A maneira anterior de escrever o redutor é a seguinte
function countReducer(state = 0,action){ switch (action.type) { case 'INCREMENT_ONE': return state + 1; case 'INCREMENT_NUMBER': return state + action.number; default: return state; } } export default{ countReducer}
2.4 Adicionar Redutores de Fatia à Loja
- Em seguida, precisamos importar a função redutora da fatia do contador e adicioná-la à nossa loja. Ao definir um campo no parâmetro redutores, dizemos ao armazenamento para usar esta função redutora de fatia para lidar com todas as atualizações para este estado.
- Então, finalmente
store.js, da seguinte forma:
2.5 Usando Redux State e Actions em componentes React
- Agora podemos usar ganchos React Redux para permitir que os componentes do React interajam com o armazenamento Redux. pudermosUse useSelector para ler dados da loja (não por meio de adereços)e use
useDispatchações de expedição. - O design dentro do componente é o seguinte:
2.6 Renderização
- mesmo código
2.7 Efeito
2.7.1 Exibição de efeitos
- do seguinte modo:
2.7.2 Descrição
- Clique nos botões [Click me +1], [Click me -1] e [Add]: a
ação Redux correspondente será despachada para a loja;
o redutor de fatia de contagem verá as ações e atualizará seu estado;
<Counter>o componente irá vê-lo do novo valor de estado armazenado e se renderiza novamente com os novos dados.
2.8 Nota:
- do seguinte modo:
2.9 Código anexado
-
contadorSlice.js
import { createSlice} from '@reduxjs/toolkit' export const counterSlice = createSlice({ name: 'myFirstCounterSlice', //这个名字随便取 标识 initialState: { value: 0, //初始值 }, reducers: { // 对比之前的reducer是一个函数，里面是根据不同的action的type判断的switch语句 incrementOne: (state) =>{ //下面生成 加 1 的action，等价于原先只有type的action state.value += 1; }, decrementOne: (state) =>{ //下面生成 减 1 的action，等价于原先只有type的action state.value -= 1; },incrementNumber: (state,action) =>{ //等价于不只有type一个参数的action state.value += action.payload; //payload } } }); // 为每个 case reducer 函数生成 Action creators export const { incrementOne,decrementOne,incrementNumber} = counterSlice.actions; const countReducer = counterSlice.reducer; export default countReducer; -
loja.js
import { configureStore } from '@reduxjs/toolkit'; import countReducer from './reducerAndAction/counterSlice'; export default configureStore({ reducer: { counterState: countReducer, }, }); -
Contador.jsx
import { useRef} from "react"; import { useDispatch, useSelector } from 'react-redux' import { incrementOne,decrementOne,incrementNumber} from '../redux/reducerAndAction/counterSlice' function Couter(){ // console.log(props); const numberRef = useRef(); const count = useSelector((state)=>state.counterState.value); const dispatch = useDispatch(); //加 1 的 function addOne(){ dispatch(incrementOne()); } //动态增加 function addNumber(){ const stringNumber = numberRef.current.value; //直接取取的是字符串 const number = parseInt(stringNumber); const addNumberAction = incrementNumber(number); //有参数的action dispatch(addNumberAction); } return( <div> 当前数值是：{ count} <br /> <button onClick={ addOne}>点我+1</button> <button onClick={ ()=>dispatch(decrementOne())}>点我-1</button> <br /><br /> <input type="number" ref={ numberRef} placeholder="请输入要加的数"/> <button onClick={ addNumber}>加数</button> </div> ) } export default Couter;
3. Exemplo 2 – Pequeno exemplo prático
3.1 Adicione outro componente Dog
3.1.1 Escrevendo dogSlice
- do seguinte modo:
3.1.2 Modificar store.js
- do seguinte modo:
3.1.3 Escrevendo componente de cachorro
- Por uma questão de conveniência, a adição é escrita de forma simples. Se necessário, você mesmo pode otimizá-la, da seguinte forma:
3.1.4 Efeito
- do seguinte modo:
3.2 Esse compartilhamento de dados é muito simples, certo?
3.2.1 Experimente o compartilhamento de dados
- Tente acessá-lo diretamente, o código é o seguinte:
- Realmente funciona. Isso é muito mais simples que redux + react-redux. O efeito é o seguinte
3.2.2 compartilhamento de dados react-redux + redux
- Sobre como implementar o compartilhamento de dados por meio do compartilhamento de dados react-redux + redux, leia os seguintes artigos, se necessário, como segue:
Component Communication 05 in React (react18) - redux ➕ react-redux (incluindo compartilhamento de dados) .
4. Sobre carga útil - carga útil
- Em relação a
state.value += action.payload; //payload, aqui está um exemplo: se você ainda usa o redux original, a ação também pode ser escrita da seguinte forma:
- Para outro exemplo, você pode escrever a função de criação de ação de "Adicionar um item de tarefa" assim:
var id = 1 function addTodo(content) { return { type: 'ADD_TODO', payload: { id: id++, content: content, // 待办事项内容 completed: false // 是否完成的标识 } } } - Pode-se entender
action.payloadpor que é usado desta forma. Por uma questão de padronização, não importa quais parâmetros você passe, números ou objetos, é a mesma coisa. Será melhoraction.payloadentendido se você observar nosso exemplo acima, como segue:
5. Código do projeto
5.1 Diretório de códigos
- do seguinte modo:
