Usando @reduxjs/toolkit y reaccionar-redux para la gestión del estado en React

Usando @reduxjs/toolkit y reaccionar-redux para la gestión del estado en React

1. Instale las dependencias:
asegúrese de que @reduxjs/toolkit y react-redux estén instalados en su proyecto. Se puede instalar usando el siguiente comando:

npm install @reduxjs/toolkit react-redux

2. Cree un módulo Slice para definir el valor inicial del estado, las acciones y el reductor.

// src/features/counterSlice.js

import {
    
     createSlice } from '@reduxjs/toolkit';

// 创建Slice
const counterSlice = createSlice({
    
    
  name: 'counter',
  initialState: {
    
    
     number:0,
     text:'你好'
  }, 
  reducers: {
    
     //同步修改state
    addnumber: (state,action) => {
    
    
        state.number=state.number+action.payload
    },
    decrement: (state,action) => {
    
    
     state.text=action.payload
    },
  },
});

// 导出actions
export const {
    
     addnumber, decrement} = counterSlice.actions;

// 导出reducer
export default counterSlice.reducer;

3. Cree un módulo RootReducer:
cree un módulo RootReducer para administrar centralmente todos los reductores.

// src/reducers/index.js

import {
    
     combineReducers } from '@reduxjs/toolkit';
import counterReducer from '../features/counterSlice';

// 将多个reducer合并为一个RootReducer
const rootReducer = combineReducers({
    
    
  counter: counterReducer,
});

export default rootReducer;

4. Cree un módulo de Tienda:
cree un módulo de Tienda para configurar la tienda Redux.

// src/store/index.js

import {
    
     configureStore } from '@reduxjs/toolkit';
import rootReducer from '../reducers';

// 创建并导出store
const store = configureStore({
    
    
  reducer: rootReducer,
});

export default store;

5. Utilice el proveedor en el archivo de entrada:
utilice el componente Proveedor en el archivo de entrada de la aplicación para proporcionar la tienda.

// src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import {
    
     Provider } from 'react-redux';
import store from './store';
import App from './App';

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

6. Utilice el estado en los componentes:
en los componentes que necesitan utilizar el estado, utilice la función de enlace useSelector para obtener el valor de estado y utilice la función de enlace useDispatch para obtener la función de envío.

import React from 'react';
import {
    
     useSelector, useDispatch } from 'react-redux';
import {
    
     increment, decrement } from '../features/counterSlice';

function Counter() {
    
    
  const count = useSelector((state) => state.counter); // 获取counter状态
  const dispatch = useDispatch();

  const handleIncrement = () => {
    
    
    dispatch(increment()); // 分发increment action
  };

  const handleDecrement = () => {
    
    
    dispatch(decrement()); // 分发decrement action
  };

  return (
    <div>
      <p>Count: {
    
    count}</p>
      <button onClick={
    
    handleIncrement}>Increment</button>
      <button onClick={
    
    handleDecrement}>Decrement</button>
    </div>
  );
}

Implementar operaciones asincrónicas

Cree un procesador asincrónico:
en el módulo Slice, use createAsyncThunk para definir una función de procesador asincrónico para procesar operaciones asincrónicas.

// src/features/counterSlice.js

import {
    
     createSlice, createAsyncThunk } from '@reduxjs/toolkit';

// 异步操作的处理函数
const fetchCount = async () => {
    
    
  // 模拟异步操作
  await new Promise((resolve) => setTimeout(resolve, 1000));
  return 10;
};

// 创建异步thunk
export const fetchCountAsync = createAsyncThunk('counter/fetchCount', fetchCount);

// 创建Slice
const counterSlice = createSlice({
    
    
  name: 'counter',
  initialState: {
    
    
    value: 0,
    loading: false,
  },
  reducers: {
    
    
    increment: (state) => {
    
    
      state.value += 1;
    },
    decrement: (state) => {
    
    
      state.value -= 1;
    },
  },
  extraReducers: (builder) => {
    
    
    builder
      .addCase(fetchCountAsync.pending, (state) => {
    
    
        state.loading = true;
      })
      .addCase(fetchCountAsync.fulfilled, (state, action) => {
    
    
        state.value = action.payload;
        state.loading = false;
      });
  },
});

// 导出actions
export const {
    
     increment, decrement } = counterSlice.actions;

// 导出reducer
export default counterSlice.reducer;

Utilice operaciones asincrónicas en componentes:
utilice useEffect y useDispatch en componentes para activar operaciones asincrónicas y procesar los resultados.

import React, {
    
     useEffect } from 'react';
import {
    
     useSelector, useDispatch } from 'react-redux';
import {
    
     increment, decrement, fetchCountAsync } from '../features/counterSlice';

function Counter() {
    
    
  const count = useSelector((state) => state.counter.value);
  const loading = useSelector((state) => state.counter.loading);
  const dispatch = useDispatch();

  useEffect(() => {
    
    
    dispatch(fetchCountAsync());
  }, [dispatch]);

  return (
    <div>
      <p>Count: {
    
    count}</p>
      {
    
    loading ? <p>Loading...</p> : null}
      <button onClick={
    
    () => dispatch(increment())}>Increment</button>
      <button onClick={
    
    () => dispatch(decrement())}>Decrement</button>
    </div>
  );
}

Usamos la función de enlace useEffect para activar operaciones asincrónicas después de montar el componente y enviar la función de procesador asincrónico a través de despacho (fetchCountAsync ()). Al mismo tiempo, el estado de carga de las operaciones asincrónicas se muestra a través del estado de carga.