React的状态管理库-Redux

核心思想:单一数据源状态是只读的 、以及使用纯函数更新状态。

组成部分

Store(存储)

应用的唯一状态容器,存储整个应用的状态树,使用 createStore() 创建。

  1. getState():获取当前状态。
  2. dispatch(action):派发动作以触发状态更新。
  3. subscribe(listener):订阅状态变化。

Action(动作)

描述应用中发生的事情,就是一个普通的 JavaScript 对象,必须有 type 属性,用来描述动作的类型,其他字段可以包含任何附加信息(例如,payload)。

Reducer(状态处理器)

是一个纯函数,接收当前的状态和一个动作,返回新的状态,函数签名:(state, action) => newState,通过处理不同类型的动作更新状态。

Middleware(中间件)

拦截 dispatch 的动作,用于扩展 Redux 的功能,例如处理异步操作(redux-thunk)或日志记录(redux-logger)。

Provider(React 集成部分)

使用 react-redux 提供 **Provider**组件,将 Redux 的 store 传递给整个 React 组件树。

应用

安装依赖

复制代码
npm install redux react-redux

创建 Redux Store

定义Action

javascript 复制代码
// src/actions/types.js
// 定义一些常量来表示 action 的类型,这有助于避免拼写错误
export const INCREMENT = "INCREMENT";
export const DECREMENT = "DECREMENT";
javascript 复制代码
// src/actions/counterActions.js
// 创建 action creator 函数来生成 action 对象。
import { INCREMENT, DECREMENT } from "./types";

export const increment = () => ({
  type: INCREMENT,
});

export const decrement = () => ({
  type: DECREMENT,
});

创建 Reducer

javascript 复制代码
// src/reducers/counterReducer.js
// 创建 reducer 函数来处理不同的 action 类型。
import { INCREMENT, DECREMENT } from "../actions/types";

const initialState = {
  count: 0,
};

function counterReducer(state = initialState, action) {
  switch (action.type) {
    case INCREMENT:
      return {
        ...state,
        count: state.count + 1,
      };
    case DECREMENT:
      return {
        ...state,
        count: state.count - 1,
      };
    default:
      return state;
  }
}

export default counterReducer;
javascript 复制代码
// src/reducers/index.js
import { combineReducers } from "redux";
import counterReducer from "./counterReducer";

const rootReducer = combineReducers({
  counter: counterReducer,
});

export default rootReducer;

创建 Store

javascript 复制代码
// store.js
import { createStore } from 'redux';
import counterReducer from './reducer';

const store = createStore(counterReducer);

export default store;

在 React 应用中使用 Redux

设置 Provider

javascript 复制代码
// index.js
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
// Provider是React-Redux提供的一个组件,用于将Redux store传递给应用中的所有组件。
import { Provider } from "react-redux";
import store from "./store/index";
import reportWebVitals from "./reportWebVitals";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <Provider store={store}>
      {" "}
      {/* 将App组件包裹在Provider中 */}
      <App />
    </Provider>
  </React.StrictMode>
);
reportWebVitals();

组件中访问状态和派发动作

javascript 复制代码
// src/components/js/CounterWithHooks.js
import React from "react";
import { useSelector, useDispatch } from "react-redux";
import { increment, decrement } from "../../actions/counterActions";

function CounterWithHooks() {
  const count = useSelector((state) => state.counter.count);
  const dispatch = useDispatch();

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={() => dispatch(increment())}>Increment</button>
      <button onClick={() => dispatch(decrement())}>Decrement</button>
    </div>
  );
}

export default CounterWithHooks;

Redux 中间件的扩展

添加异步支持(redux-thunk

javascript 复制代码
npm install redux-thunk

修改 store.js

javascript 复制代码
import { createStore, applyMiddleware } from 'redux';
import {thunk}  from 'redux-thunk';// 使用命名导出
// import thunk  from 'redux-thunk';// 使用默认导出
import counterReducer from './reducer';

const store = createStore(counterReducer, applyMiddleware(thunk));

export default store;

示例异步 Action

javascript 复制代码
// src/actions/counterActions.js
// 创建 action creator 函数来生成 action 对象。
import { INCREMENT, DECREMENT } from "./types";
export const increment = () => ({
  type: INCREMENT,
});

export const decrement = () => ({
  type: DECREMENT,
});

export const incrementAsync = () => {
  return (dispatch) => {
    setTimeout(() => {
      dispatch(increment());
    }, 1000);
  };
};

export const decrementAsync = () => {
  return (dispatch) => {
    setTimeout(() => {
      dispatch(decrement());
    }, 1000);
  };
};

示例

javascript 复制代码
// src/components/js/CounterWithHooks.js
import React from "react";
import { useSelector, useDispatch } from "react-redux";
import { increment, decrement, incrementAsync, decrementAsync } from "../../actions/counterActions";

function CounterWithHooks() {
  const count = useSelector((state) => state.counter.count);
  const dispatch = useDispatch();

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={() => dispatch(increment())}>Increment</button>
      <button onClick={() => dispatch(decrement())}>Decrement</button>
      <button onClick={() => dispatch(incrementAsync())}>Increment Async</button>
      <button onClick={() => dispatch(decrementAsync())}>Decrement Async</button>
    </div>
  );
}

export default CounterWithHooks;

总结

  1. State: 整个应用的状态树。
  2. Actions: 描述状态变化的对象。
  3. Reducers: 纯函数,根据 action 更新 state。
  4. Store: 持有应用的 state 树,提供方法来获取 state、分发 action 和注册/注销监听器。
相关推荐
Jinuss18 小时前
Vue3源码reactivity响应式篇之computed计算属性
前端·vue3
落日沉溺于海18 小时前
React From表单使用Formik和yup进行校验
开发语言·前端·javascript
知识分享小能手18 小时前
React学习教程,从入门到精通, React 新创建组件语法知识点及案例代码(11)
前端·javascript·学习·react.js·架构·前端框架·react
会豪18 小时前
工业仿真(simulation)--前端(五)--标尺,刻度尺
前端
会豪18 小时前
工业仿真(simulation)--前端(四)--画布编辑(2)
前端
an__ya__18 小时前
Vue数据响应式reactive
前端·javascript·vue.js
苦逼的搬砖工18 小时前
Flutter UI Components:闲来无事,设计整理了这几年来使用的UI组件库
前端·flutter
想买Rolex和Supra的凯美瑞车主18 小时前
Taro + Vite 开发中 fs.allow 配置问题分析与解决
前端
ruanCat18 小时前
使用 vite 的 base 命令行参数来解决项目部署在 github page 的路径问题
前端·github
Codebee18 小时前
使用Qoder 改造前端UI/UE升级改造实践:从传统界面到现代化体验的华丽蜕变
前端·人工智能