什么是 Redux Toolkit，为什么它更受欢迎？

在担任前端开发人员或全栈开发人员时，许多工程师遇到了 Redux。但是最近 Redux Team 推出了 Redux Toolkit，这是一个官方推荐的 SOPE 库，代表 Simple、Opinionated、Powerful、Effective 状态管理库。它使我们能够编写更高效的代码、加快开发过程并自动应用最佳推荐实践。它主要是为了解决 Redux 的三个主要问题而创建的：

• 配置 Redux 存储太复杂
• 必须添加很多包才能构建大型应用程序
• Redux 需要太多样板代码，这使得编写高效和干净的代码变得很麻烦。

它还为 Redux Dev-tools Extension 和 immer.js 库提供自动支持，后者是处理不可变对象的好工具。您还可以使用 Redux Toolkit 的各种预定义功能，不仅可以加快流程，还可以节省时间。

Redux Toolkit 附带的依赖项：

• 沉浸
• 还原
• redux-thunk
• 重新选择

安装：

# NPM
npm install @reduxjs/toolkit

# Yarn
yarn add @reduxjs/toolkit

提供了哪些额外功能：

• 一个 configureStore()函数，它为 Redux-thunk、Redux DevTools Extension 提供自动支持，并传递默认中间件。
• 一个 createReducer() 实用程序，它为 immer 库提供支持，允许可变地编写不可变代码。
• 一个 createAction() 实用程序，它返回一个动作创建函数。
• 一个 createSlice()函数，可以方便地用单个函数。
• 将 Redux字符串作为参数并返回 Promise 的 createAsyncThunk()。
• 帮助执行 CRUD 操作的 createEntityAdapter() 实用程序。

Redux 和 Redux Toolkit(with React) 的基本比较：

1. Redux ：创建 Store 和 reducer。

   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：创建 Store 和 reducer。

   Javascript

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

使用 Redux DevTools 扩展：

1. React：您必须在创建商店时添加预定义语句才能访问 Redux DevTools。

   Javascript

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

2. Redux Toolkit：它为 Redux DevTools Extension 提供自动支持。

   Javascript

   const store = configureStore(
     reducer:rootReducer );
   

修改状态：

1. Redux：我们需要手动处理和更改不可变的状态。

   Javascript

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

2. Redux Toolkit：它提供了对 immer.js 库的支持，该库可以自动更改不可变的代码。

   Javascript

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

结论：

1. Redux Toolkit 对所有 Redux 用户都有益，无论其技能水平如何。它可以在开始时作为项目的内部部分添加，也可以在现有项目的内部升级过程中添加。
2. 但是，在从 Redux 迁移到 Redux Toolkit 之前，您仍然应该具备如何处理和更改状态的基本知识，并且还应该了解幕后发生的事情。