大家好，这里是Asen😎，近日上线了个人博客网站： 联系我一起学习进步，有任何问题也可探讨。

• asen-learn-space.vercel.app/
• 联系方式 : VX => Wupsssss

第一篇：redux

redux简介💡

• Redux 是一个用于 JavaScript 应用程序的可预测状态容器，它可以帮助开发者更好地管理应用程序中的数据和状态，并使得这些状态在不同组件之间共享更加轻松。Redux 的设计思想来源于 Flux 架构，但是 Redux 更加简洁、灵活、易于理解和使用。

• 在 Redux 中，所有的状态都被存储在一个对象树中，称之为“state”。当应用程序中的某个事件导致 state 发生改变时，Redux 会创建一个新的 state 对象来代替旧的 state 对象。这个新的 state 对象会自动传递给所有注册了监听器的组件，从而触发组件的重新渲染，使得界面始终保持与当前的 state 对象一致。

• Redux 中的状态和行为都被抽象为“action”对象，每个 action 都包含一个必需的 type 字段和一些可选的 payload 数据。当用户交互或者其他事件引起了状态改变时，应用程序会派发一个对应的 action 对象，然后通过 Redux 的“reducer”函数处理这个 action 并更新 state 对象。

• Redux 还提供了一些辅助工具来简化开发流程，例如 middleware 和 DevTools。Middleware 允许开发者在 Redux 的 action 和 reducer 之间添加额外的逻辑，例如异步操作和日志记录等。DevTools 则是一个调试工具，可以帮助开发者跟踪 state 的变化、调试问题和回放操作等。

总之 Redux 是一个非常强大的 JavaScript 应用程序状态管理库，它使得应用程序中的状态更加可预测、可控和易于维护，是 React 生态系统中非常重要的一部分。

redux示例：

1.配置redux store💡 在Src目录下新建store文件夹 /src/store/index.js

import { createStore } from "redux";

let initial = {
    supNum: 10,
    oppNum: 5,
};
const reducer = function reducer(state = initial, action) {
    // 浅拷贝，不直接修改容器中的状态,而是在return 时再修改
    state = { ...state };
    switch (action.type) {
        case "VOTE_SUP":
            state.supNum++;
            break;
        case "VOTE_OPP":
            state.oppNum++;
            break;
        default:break;
    }
    return state;
};
const store = createStore(reducer);

export default store;

1. 根目录创建上下文context文件 /src/ThemeContext.js

import React from "react";
 const ThemeContext = React.createContext();
 export default ThemeContext

1. 在main.jsx中导入store

import ReactDOM from "react-dom/client";
import { ConfigProvider } from "antd";
import App from "./App.jsx";
import "./index.less";

//加载redux
import store from "./store";
//添加上下文
import ThemeContext from "./ThemeContext";

// 由于 antd 组件的默认文案是英文，所以需要修改为中文
import dayjs from "dayjs";
import "dayjs/locale/zh-cn";
import zhCN from "antd/locale/zh_CN";
import "antd/dist/reset.css";
dayjs.locale("zh-cn");
ReactDOM.createRoot(document.getElementById("root")).render(
  <ConfigProvider locale={zhCN}>
    <ThemeContext.Provider value={{ store }}>
      <App />
    </ThemeContext.Provider>
  </ConfigProvider>
);

4. 在子组件中使用

import { useContext, useState ,useEffect} from "react";
import ThemeContext from "../ThemeContext";
import { Button } from "antd";

const Home = function Home() {
  const { store } = useContext(ThemeContext);
  let { supNum, oppNum } = store.getState();

  //
  let [num, setNum] = useState(0);
  const update = () => {
    setNum(num + 1);
  };
  useEffect(() => {
    let unsubcribe = store.subscribe(update);
    return () => {
        unsubcribe();
    };
  }, [num]);

  return (
    <div className="Home-box">
      <Button
        type="primary"
        onClick={() => {
          store.dispatch({
            type: "VOTE_SUP",
            step: 10,
          });
        }}
      >
        sup
      </Button>
      <Button
        type="primary"
        onClick={() => {
          store.dispatch({
            type: "VOTE_OPP",
            step: 10,
          });
        }}
      >
        opp
      </Button>
      Home {supNum + "-----" + oppNum}
    </div>
  );
};

export default Home;

第二篇：react-redux

react-redux简介💡

• React-Redux 是一个为 React 应用提供可预测化状态容器的 JavaScript 库，它建立在 Redux 库之上，使得 Redux 中管理的状态更加轻松和高效地在 React 中进行使用。

• React-Redux 的主要作用是连接 React 组件和 Redux store，并提供访问 store 中 state 和 dispatch 函数的便捷方式，从而更加轻松地进行状态管理，提高应用程序的可维护性和扩展性。React-Redux 使用了 connect 高阶组件和 Provider 组件来实现这个功能。

• connect 函数接受两个参数：mapStateToProps 和 mapDispatchToProps。mapStateToProps 用于将 store 中的 state 映射到组件的 props 中，mapDispatchToProps 用于将 action creator 映射到组件的 props 中。当 Redux store 中的 state 或者 dispatch 发生变化时，connect 函数可以自动重新获取最新的 state 并将其传递给组件。

• Provider 是一个高阶组件，它接收一个 Redux store 对象作为参数，并将其传递给所有的子组件，从而使得所有的子组件都可以访问到 store 中的 state 和 dispatch 函数。这样，在 Redux store 中的 state 发生变化时，所有的子组件都会相应地更新。

总结

• React-Redux 可以帮助我们更加高效地在 React 应用中使用 Redux，它提供了一些便捷的方式来连接 React 组件和 Redux store，并在应用程序中保证了 Redux 的状态单一性、可预测性和可控性。

react-redux基本原理💡

• 当一个 React 组件需要访问 Redux store 中的数据时，它通过 connect() 函数将自己与 Redux store 进行连接，并从 Redux store 中获取所需的状态信息。当组件发生变化时，例如用户对界面进行操作，组件会调用 dispatch() 函数发送一个 action，Redux store 会根据这个 action 更新相应的 state。更新后的 state 将会被传递给所有已连接的组件，组件也会相应地更新。

• React-Redux 的主要作用就是连接 React 组件和 Redux store，并提供访问 store 中 state 和 dispatch 函数的便捷方式。connect 函数实现了高阶组件模式，通过 mapStateToProps 和 mapDispatchToProps 将数据从 Redux store 中映射到 React 组件的 props 属性上，使得在组件内部可以方便地获取到 Redux 的状态和派发 Redux 的 action。同时，Provider 组件将 store 对象 Store 在整个应用中传递下去，保证了 Redux 的状态单一性、可预测性和可控性。

本文以计算器为简单示例，演示代码💡

1. 创建redux store:

import { createStore } from 'redux';

// 定义 reducer 函数，用于处理各种 action 并更新 state
const counterReducer = (state = 0, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1;
    case 'DECREMENT':
      return state - 1;
    default:
      return state;
  }
};

// 创建 Redux store
const store = createStore(counterReducer);

export default store;

1. 创建一个counter组件，它会将 Redux store 中的 state 映射到组件的 props 属性中，并提供两个按钮，点击按钮可以派发对应的 action 以更新 state：

import React from 'react';
import { connect } from 'react-redux';

class Counter extends React.Component {
  render() {
    const { count, onIncrement, onDecrement } = this.props;

    return (
      <div>
        <h1>Counter: {count}</h1>
        <button onClick={onIncrement}>+</button>
        <button onClick={onDecrement}>-</button>
      </div>
    );
  }
}

const mapStateToProps = (state) => ({
  count: state,
});

const mapDispatchToProps = (dispatch) => ({
  onIncrement: () => dispatch({ type: 'INCREMENT' }),
  onDecrement: () => dispatch({ type: 'DECREMENT' }),
});

export default connect(mapStateToProps, mapDispatchToProps)(Counter);

1. 最后，在主文件 App.js 中，将 Counter 组件嵌入到 Provider 组件中，Provider 会将 Redux store 对象传递给所有的子组件：

import React from 'react';
import { Provider } from 'react-redux';
import store from './store';
import Counter from './Counter';

function App() {
  return (
    <Provider store={store}>
      <Counter />
    </Provider>
  );
}

export default App;