Redux 与 Context API：何时使用它们

什么是 Context API？

那么什么是 Redux？

Redux 与 Context API 的比较

总结

感谢阅读

在React 应用程序中，将数据从父级传递给子级的最简单方法是将其传递给子级的。但是，当深层嵌套的子级需要从树中更高级别的组件获取数据时，就会出现问题。如果我们通过 传递数据，则每个子级都需要接受数据并将其传递给其子级，从而导致prop 钻取，这在 React 世界中是一种糟糕的做法。propsprops

为了解决prop 钻取问题，我们有Context API和Redux等状态管理解决方案。但是哪一个最适合你的应用呢？今天我们将解答这个老问题！

什么是 Context API？

我们来看一下官方文档：

在典型的 React 应用中，数据通过 props 自上而下（从父组件到子组件）传递，但对于应用中许多组件都需要的某些类型的 props（例如语言环境偏好、UI 主题），这种用法可能会很繁琐。Context 提供了一种在组件之间共享此类值的方法，而无需在组件树的每一层都显式传递 props。

Context API是一个内置的React工具，它不会影响最终的包大小，并且是通过设计集成的。

要使用Context API，您必须：

1. 创建上下文
   

   const Context = createContext(MockData);
   

2. 为上下文创建提供程序
   

   const Parent = () => {
       return (
           <Context.Provider value={initialValue}>
               <Children/>
           </Context.Provider>
       )
   }
   

3. 使用Context中的数据
   

   const Child = () => {
       const contextData = useContext(Context);
       // use the data
       // ...
   }
   

那么什么是 Redux？

当然，让我们先看看文档：

Redux 是 JavaScript 应用程序的可预测状态容器。

它可以帮助您编写行为一致、可在不同环境（客户端、服务器和本机）中运行且易于测试的应用程序。最重要的是，它提供了出色的开发者体验，例如结合时间旅行调试器的实时代码编辑功能。

你可以将 Redux 与 React 或任何其他视图库一起使用。它体积很小（2kB，包括依赖项），但拥有庞大的插件生态系统。

Redux是一个开源库，它提供了一个中央存储，以及修改存储的操作。它可以用于任何使用JavaScript或TypeScript的项目，但由于我们将其与Context API进行比较，因此我们将坚持使用基于 React 的应用程序。

要使用Redux，您需要：

1. 创建一个Reducer
   

   import { createSlice } from "@reduxjs/toolkit";
   
   export const slice = createSlice({
       name: "slice-name",
       initialState: {
           // ...
       },
       reducers: {
           func01: (state) => {
               // ...
           },
       }
   });
   
   export const { func01 } = slice.actions;
   export default slice.reducer;
   

2. 配置商店
   

   import { configureStore } from "@reduxjs/toolkit";
   import reducer from "./reducer";
   
   export default configureStore({
       reducer: {
           reducer: reducer
       }
   });
   

3. 使Store可供数据消费
   

   import React from 'react';
   import ReactDOM from 'react-dom';
   import { Provider } from 'react-redux';
   import App from './App.jsx'
   import store from './store';
   
   ReactDOM.render(
       <Provider store={store}>
           <App />
       </Provider>,
       document.getElementById("root")
   );
   

4. 使用状态或调度操作
   

   import { useSelector, useDispatch } from 'react-redux';
   import { func01 } from './redux/reducer';
   
   const Component = () => {
       const reducerState = useSelector((state) => state.reducer);
       const dispatch = useDispatch();
       const doSomething = () = > dispatch(func01)  
       return (
           <>
               {/* ... */}
           </>
       );
   }
   export default Component;
   

就这样了！如你所见，Redux 的设置需要做很多工作。

Redux 与 Context API 的比较

从表中，你一定能够理解，对于大型项目来说，Redux受欢迎，而对于小型项目来说， Context API受欢迎，这种流行观点从何而来。

两者都是各自领域中优秀的工具，Redux仅仅用于将数据从父级传递给子级就显得有些过头了，而Context API 则真正地发挥了作用。当你有大量动态数据时，Redux可以帮你搞定！

所以你不再需要对那个人说：

总结

在本文中，我们了解了Redux和Context API的含义以及它们之间的区别。我们了解到，Context API是一种轻量级的解决方案，更适合将数据从父级传递到深层嵌套的子级，而Redux则是一种更强大的状态管理解决方案。

快乐开发！

感谢阅读

需要一位顶级软件开发自由职业者来解决你的开发难题吗？在Upwork上联系我

想看看我正在做什么吗？查看我的个人网站和GitHub

想联系我吗？请在LinkedIn上联系我

关注我的博客，每两周在Medium上获取最新资讯

常问问题

这些是我经常收到的一些问题。希望这个常见问题解答部分能解决您的问题。

1. 我是初学者，该如何学习前端 Web 开发？
   可以参考以下文章：

   1. 前端流行语
   2. 前端开发路线图
   3. 前端项目构想
   4. 从初学者过渡到中级前端开发人员

2. 你能指导我吗？
   
   抱歉，我工作已经很忙了，没时间指导任何人。