¿Qué es Redux Toolkit y por qué es más preferido?

Mientras trabajaba como desarrollador front-end o desarrollador de pila completa, muchos ingenieros se encontraron con Redux. Pero recientemente Redux Team lanzó Redux Toolkit, una biblioteca SOPE oficialmente recomendada que significa biblioteca de administración de estado simple, obstinada, poderosa y efectiva. Nos permite escribir código más eficiente, acelerar el proceso de desarrollo y aplicar automáticamente las mejores prácticas recomendadas. Fue creado principalmente para resolver los TRES PROBLEMAS PRINCIPALES con Redux:

• Configurar una tienda Redux es demasiado complicado
• Tiene que agregar muchos paquetes para construir una aplicación a gran escala
• Redux requiere demasiado código repetitivo, lo que hace que sea engorroso escribir código eficiente y limpio.

También proporciona soporte automático para Redux Dev-tools Extension y para la biblioteca immer.js, que es una gran herramienta para tratar con objetos inmutables. También puede usar las diversas funciones predefinidas de Redux Toolkit que no solo aceleran el proceso sino que también ahorran tiempo.

Dependencias que vienen con Redux Toolkit:

• sumergir
• reducir
• redux-thunk
• volver a seleccionar

Instalar:

# NPM
npm install @reduxjs/toolkit

# Yarn
yarn add @reduxjs/toolkit

Qué características adicionales se proporcionan:

• Una función configureStore() que brinda soporte automático para Redux-thunk, Redux DevTools Extension y también pasa el middleware predeterminado.
• Una utilidad createReducer() que brinda soporte para la biblioteca immer que permite escribir el código inmutable de forma mutable.
• Una utilidad createAction() que devuelve una función creadora de acciones.
• Una función createSlice() que resulta útil para reemplazar la acción create y crear funciones Reducer con una sola función.
• Un createAsyncThunk() que toma strings de Redux como argumentos y devuelve una Promesa.
• Una utilidad createEntityAdapter() que ayuda a realizar operaciones CRUD.

Una comparación básica entre Redux y Redux Toolkit (con React):

1. Redux : creación de tiendas y reductores.

   JavaScript

   const addHandler=(state=0,action)=>{ if(action.type==='ADD') {     return state+1; } return state; }    const store = createStore(addHandler);    store.dispatch({type:'ADD'});

2. Redux Toolkit: creación de tiendas y reductores.

   JavaScript

   // Action Creators const add = createAction('ADD');     const addHandler = createReducer(0, {     [add]: state => state + 1 })    const store = configureStore({   reducer: addHandler })    store.dispatch(add());

Usando la extensión Redux DevTools:

1. Reaccionar: debe agregar una declaración predefinida al crear la tienda para acceder a Redux DevTools.

   JavaScript

   const store = createStore(   reducer,   window.__REDUX_DEVTOOLS_EXTENSION__ &&               window.__REDUX_DEVTOOLS_EXTENSION__() );

2. Redux Toolkit: proporciona soporte automático para Redux DevTools Extension.

   JavaScript

   const store = configureStore(   reducer:rootReducer );

Modificando el estado:

1. Redux: Necesitamos manejar manualmente y cambiar el estado de forma inmutable.

   JavaScript

   const initialState={ counter:0}    const handler=(state=initialState,action){ return{     ...state,     counter:state.counter+1;     }     }

2. Redux Toolkit: proporciona soporte para la biblioteca immer.js que cambia automáticamente el código de forma inmutable.

   JavaScript

   const initialState={ counter:0}    const handler=(state=initialState,action){ return{     counter:state.counter+1;     }     }

Conclusión:

1. Redux Toolkit es beneficioso para todos los usuarios de Redux, independientemente del nivel de habilidad. Se puede agregar como parte interna del proyecto al inicio o se puede agregar durante la actualización interna en el existente. 
2. Pero aún se prefiere que tenga el conocimiento básico de cómo manejar y cambiar el estado de manera inmutable y también debe tener una idea de lo que sucede debajo del capó antes de migrar de Redux a Redux Toolkit.