Redux 与 ContextProvider：在 React 应用程序中选择状态管理

百变鹏仔 3天前 #JavaScript

文章标签应用程序

长话短说

让我们开始吧

在 react 或 next.js 应用程序中管理状态时，redux 和 context.provider 之间的选择取决于您正在处理的状态的复杂性和规模。 redux 擅长管理多个消费者的复杂、频繁更新的全局状态，确保性能优化和更好的可扩展性。另一方面，context.provider 更简单，更适合本地化状态管理，避免了 redux 引入的开销。本文深入探讨了每种方法的优缺点，并通过代码示例进行了说明，并探讨了如何优化 redux 在现实场景中的性能。

redux 与 context.provider：何时使用哪个？

redux

redux 是一个强大的状态管理库，它提供了一个全局存储来保存应用程序的状态。它允许可预测的状态更新、对渲染的细粒度控制，并且非常适合多个组件需要访问和修改状态的大型应用程序。

context.provider

另一方面，context.provider 内置于 react 中，非常适合更小、更简单的状态管理任务。它非常适合状态相对简单且只有少数组件需要使用它的情况。然而，随着状态变得更加复杂并且需要被许多组件访问，context.provider 可能会因不必要的重新渲染而导致性能问题。

何时使用 redux：

复杂的状态管理：
调试和开发工具：
副作用中间件：
可扩展性：

何时使用 context.provider：

简单或本地化状态：
避免样板：
无需中间件：
组件主题或配置状态：

何时结合 redux 和 context.provider：

在某些情况下，您可能希望在同一应用程序中同时使用 redux 和 context.provider。例如：

用代码解释

让我们探索 next.js 应用程序中的两个场景，其中 redux 可以解决 context.provider 的一些缺点，以及另一个场景，其中 context.provider 是一个更简单、更合适的解决方案。

1. redux 解决 context provider 缺点的场景

问题：频繁更新和多个消费者的复杂状态

假设您有一个 next.js 应用程序，其中不同页面的多个组件需要访问和更新共享状态。状态很复杂并且经常变化（例如，在电子商务应用程序中管理购物车）。使用 context.provider，每次状态更新都可能触发整个组件树不必要的重新渲染。

redux 解决方案：redux 允许您通过集中式存储、减速器和操作来有效管理这种复杂的状态。它最大限度地减少了不必要的重新渲染，并通过选择器和记忆提供了更好的性能。

// store.tsimport { configurestore } from '@reduxjs/toolkit';import cartreducer from './cartslice';export const store = configurestore({  reducer: {    cart: cartreducer,  },});

// cartslice.tsimport { createslice, payloadaction } from '@reduxjs/toolkit';interface cartstate {  items: { id: number; name: string; quantity: number }[];}const initialstate: cartstate = { items: [] };const cartslice = createslice({  name: 'cart',  initialstate,  reducers: {    additem(state, action: payloadaction) {      const item = state.items.find(i =&gt; i.id === action.payload.id);      if (item) {        item.quantity += 1;      } else {        state.items.push({ ...action.payload, quantity: 1 });      }    },    removeitem(state, action: payloadaction<number>) {      state.items = state.items.filter(i =&gt; i.id !== action.payload);    },  },});export const { additem, removeitem } = cartslice.actions;export default cartslice.reducer;</number>

// index.tsximport { useselector, usedispatch } from 'react-redux';import { rootstate } from '../store';import { additem, removeitem } from '../cartslice';export default function home() {  const cartitems = useselector((state: rootstate) =&gt; state.cart.items);  const dispatch = usedispatch();  return (    <div>      <h1>shopping cart</h1>      <ul>        {cartitems.map(item =&gt; (          <li key="{item.id}">            {item.name} - {item.quantity}            <button onclick="{()"> dispatch(removeitem(item.id))}&gt;remove</button>          </li>        ))}      </ul><button onclick="{()"> dispatch(additem({ id: 1, name: 'item 1' }))}&gt;        add item 1      </button>    </div>  );}

为什么 redux 在这里更好：

以下是 markdown 格式的文章的其余部分：

2. redux 过大而 context provider 更简单的场景

问题：主题的简单状态管理

考虑一个您想要管理应用程序主题（浅色/深色模式）的场景。状态很简单，只有少数组件需要访问它。

context.provider 的解决方案：

对于这种情况，使用 context.provider 更简单、更轻量。

// themecontext.tsximport { createcontext, usestate, usecontext, reactnode } from 'react';interface themecontextprops {  theme: 'light' | 'dark';  toggletheme: () =&gt; void;}const themecontext = createcontext<themecontextprops undefined>(undefined);export const themeprovider = ({ children }: { children: reactnode }) =&gt; {  const [theme, settheme] = usestate('light');  const toggletheme = () =&gt; {    settheme(prevtheme =&gt; (prevtheme === 'light' ? 'dark' : 'light'));  };  return (    <themecontext.provider value="{{" theme toggletheme>      {children}    </themecontext.provider>  );};export const usetheme = () =&gt; {  const context = usecontext(themecontext);  if (!context) {    throw new error('usetheme must be used within a themeprovider');  }  return context;};</themecontextprops>

// index.tsximport { usetheme } from '../themecontext';export default function home() {  const { theme, toggletheme } = usetheme();  return (    <div style="{{" background: theme="==" : color:>      <h1>current theme: {theme}</h1>      <button onclick="{toggletheme}">toggle theme</button>    </div>  );}

// _app.tsximport { ThemeProvider } from '../ThemeContext';export default function MyApp({ Component, pageProps }) {  return (    <themeprovider><component></component></themeprovider>  );}

为什么 context.provider 在这里更好：

redux 如何帮助 transagate.ai

在 transagate.ai，redux 显着提高了我们的开发速度。通过集中状态管理，我们能够在不影响性能的情况下快速交付功能。有效地微调重新渲染和管理复杂状态的能力释放了我们的创造力，使我们能够构建强大且可扩展的解决方案。 redux 可预测的状态更新和广泛的生态系统使其成为我们开发流程的关键部分，使我们能够专注于创新和用户体验。

文章推荐