直接跳到react-redux之前。首先意识到反应至关重要。我会非常简洁。

什么是反应

React是用于设计和构建Web应用程序的前端JavaScript库。由于它是库，这意味着有多个软件包/模块用于执行不同的任务。早些时候，它主要是在班级组件中进行的，但是自从引入“钩子”班级组件以来几乎已经过时了。

现在，对于React钩子，它们提供基于功能的组件而不是基于类的组件。
在React中，我们构建组件，然后您将它们集成在一起以构建一个完整的应用程序。例如，在特定的网站中，纳纳栏，侧栏，搜索，页脚等是不同的组件。钩子提供了一种在应用程序状态之间存储和重复使用逻辑的方法。

这是反应组件的基本结构。

import React from 'react';

function App() {
  return (
    <div>
      <h1>React, Redux and Redux-toolkit</h1>
    </div>
  );
}

export default App;

React中最常见的钩子是useState。此挂钩存储应用程序的状态，并提供了一种更改它的方法。在构建申请时，有时数量可以达到
压倒性的数字。在这种情况下，正确管理状态可能非常详尽。要解决此问题，我们使用Redux。

redux

第一个Redux是任何JavaScript应用程序的状态管理库。 Redux为应用程序提供了一个集中存储，以存储该应用程序。这意味着，我们不是为每个组件创建状态，而是创建应用程序的所有组件都可以访问的状态。

继续进行React-Redux之前，很少有重要的术语在Redux中学习。

商店：顾名思义，它是存储和管理应用程序状态的集中位置。商店中使用了两种重要方法。第一个用于检索应用程序当前状态的getState()is，第二个用于启动状态更改的dispatch(action)is。

动作：是向商店发出信号的JavaScript对象，需要更改该状态。它描述了type和payload。 payload可以视为可以传递给商店的数据或参数。

还原器：这些是基本改变状态的纯JavaScript函数。这些功能采用actions和当前状态，然后返回更新的状态。 actions是在州执行的操作。

注意：redux中的state是不可变的，即不能更改它们。因此，reducers实际上并没有改变状态，而是创建state的更新副本。

React-Redux

React-Redux是提供React和Redux之间链接的库。

现在让我们尝试使用简单的计数器应用来理解redux。

在我们的react应用程序中使用redux的包装很少。

npm i redux react-redux

首先，我们将创建store，我们将在其中存储申请的州。为了简化示例，我在我们存储状态的同一文件中编写reducer。

store.js

import {createStore} from 'redux'

const reducerFxn=(state={counter:0},action)=>{
    if(action.type==="increase"){
        return {counter:state.counter+1}
    }
    if(action.type==="decrease"){
        return {counter:state.counter-1}
    }
    return state
}
const store =createStore(reducerFxn)
export default store;

在上面的代码段中，有reducerFxn将当前状态和动作作为其输入。然后，根据action.type，它返回具有更新值的新state。在这种情况下，会增加和减少动作类型。最后有默认返回状态。（专门用于初始渲染）

对于应用程序，要访问商店，将整个应用程序包装在<Provider>组件中。

index.js

import {React} from 'react'
import {ReactDOM} from 'react-dom/client'
import {App} from './App.jsx'
import './index.css'
import { Provider } from 'react-redux'
import {store} from './store/index.js'
ReactDOM.createRoot(document.getElementById('root')).render(
  <Provider store={store}>
  <React.StrictMode>
    <App />
  </React.StrictMode>
  </Provider>
);

我们通过store道具，以便<App/>中的每个组件都可以访问商店。我们从store.js

最后，我们将构建我们的主要应用程序组件。

app.js

import {useSelector,useDispatch} from 'react-redux'
function App{
  const counter=useSelector((state)=>state.counter)
  const dispatch=useDispatch()
  const increment=()=>{
    dispatch({type:'increase'})
  }
  const decrement=()=>{
    dispatch({type:'decrease'})
  }
  return (
    <div>
      <h1>Counter app</h1>
      <h2>{counter}</h2>
      <button onClick={increment}>increase</button>
      <button onClick={decrement}>decrease</button>
    </div>
  );
}
export default App;

useSelector钩用于从store访问状态。
useDispatch钩用于启动或派遣reducer的操作（在本例中为reducerFxn）。我们不能直接使用调度钩，因此我们必须初始化它。

我们的计数器申请是准备好了¥³ð¥³

我希望您能得到“ Redux”和“ React-Redux”的基本要素。

以下是一些可以有用的参考 -
react redux

您可以与我联系here