代码编织梦想

入门案例

参考视频 https://www.youtube.com/watch?v=NqzdVN2tyvQ


环境配置

由于国外下载源过慢,这里改用 vite 搭设 react 环境

首先使用 vite 创建对应的 react 环境,选择 javascript 而不是 typescript
npm create vite@3

进入对应项目文件夹后执行初始化 npm i

此时安装两个关键库
npm i react-redux @reduxjs/toolkit


项目驱动

此入门案例旨在让读者们快速了解容器创建的完整步骤,并了解其模板格式,便于日后套用与扩展

目标:实现一个简单的计数器功能

redux 的基本使用步骤:

  1. 编写 store,作为全部容器的总管理器
  2. 编写 slice,可将其视为单个容器,各个 slice 互相隔离
  3. 编写组件,在组件内可以直接调用容器进行状态处理
  4. 调用并渲染组件

编写 slice

由于 slice 是最底层的容器,所以从这里开始写,而不是一开始就写 store

为了便于先前接触过 vue 框架下的 pinia 容器管理的读者快速理解,注释中对 redux 的功能与 pinia 做出了类比(可能部分概念并不完全对应,但能大体理解即可!)

以下展示了单个 slice 的基础模板,详细功能请直接看代码解析

代码清单 features/counter/counterSlice

// 从redux toolkit库导入createSlice
import { createSlice } from "@reduxjs/toolkit";

// 容器中的值在此执行初始化(相当于state)
const initialState = {
	count: 0,
};

// 创建容器(相当于defineStore)
export const counterSlice = createSlice({
	// store的名字
	name: "counter",
	// store的值(相当于state)
	initialState,
	// store的方法(相当于actions+getters结合体)
	reducers: {
		increment: (state) => {
			state.count += 1;
		},
		decrement: (state) => {
			state.count -= 1;
		},
		reset: (state) => {
			state.count = 0;
		},
		// 这里的方法比较特殊,他接受除state外的一个action,后面会有提到
		incrementByAmount: (state, action) => {
			state.count += action.payload;
		},
	},
});

// 所有的actions都必须以这种方式执行导出!
export const { increment, decrement, reset, incrementByAmount } =
	counterSlice.actions;

// 固定格式,导出该容器的reducer
export default counterSlice.reducer;

定义 store

store 作为总容器,他要做的事情很少,以至于仅需要用到一个属性 reducer

configureStore 定义总容器
reducer 注册子容器

reducer 中注册子容器时,键值对的格式如下表示:
容器名:导入的容器别名

代码清单 app/store.js

import { configureStore } from "@reduxjs/toolkit";

// 这里导入的容器别名需要我们自己定义!
import counterSlice from "../features/counter/counterSlice";

export const store = configureStore({
	reducer: {
		// 注册子容器的格式如下
		// 容器原名:容器别名
		posts: counterSlice,
	},
});

编写组件

很好,设置完总容器并妥善注册子容器后,接下来就是比较复杂的使用部分了

部分功能介绍

  • useSelector ,类似于 useContext,可以获取从父组件透传下来的 store
  • useDispatch ,用于调用子容器内的 actions
import React, { useState } from "react";
import { useSelector, useDispatch } from "react-redux";
import { increment, decrement, reset, incrementByAmount } from "./counterSlice";

const Counter = () => {
	// 获取透传下来的store
	const count = useSelector((state) => state.counter.count);
	// 用于调用actions
	const dispatch = useDispatch();

	// 记录当前数值,以及对应的清除方法
	const [increAmount, setIncreAmount] = useState(0);
	const addValue = Number(increAmount) || 0;
	const resetAll = () => {
		setIncreAmount(0);
		dispatch(reset());
	};

	return (
		<section>
			<p>{count}</p>
			<div>
				<button onClick={() => dispatch(increment())}>+</button>
				<button onClick={() => dispatch(decrement())}>-</button>
			</div>

			<input
				type="text"
				value={increAmount}
				onChange={(e) => setIncreAmount(e.target.value)}
			/>
			<button onClick={() => dispatch(incrementByAmount(addValue))}>
				add amount
			</button>
			<button onClick={resetAll}>reset value</button>
		</section>
	);
};

export default Counter;

收尾

这一部分就没什么事可做了,只需要在 app.jsx 里面调用刚刚写好的组件即可

import React, { Suspense } from "react";
import Counter from "../features/counter/Counter";

export default function App() {
	return (
		<main className="App">
			<Counter />
		</main>
	);
}

之后来带 main.jsx,这里还有一些点需要大家注意

这里需要使用 Provider 将 store 透传到所有的组件内部

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./view/app";

// 导入总容器store
import { store } from "./app/store";
// 导入provider实现容器透传
import { Provider } from "react-redux";

ReactDOM.createRoot(document.getElementById("root")).render(
	<React.StrictMode>
		<Provider store={store}>
			<App />
		</Provider>
	</React.StrictMode>
);
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/delete_you/article/details/129602567

独家 | 一文带你上手卷积神经网络实战(附数据集&学习资料)_数据派thu的博客-爱代码爱编程

原文标题:Understanding deep Convolutional Neural Networks with a practical use-case in Tensorflow and Keras 作者:Ahmed Besbes 翻译:苏金六

老司机 ios 周报 #25 | 2018-07-02_weixin_34315189的博客-爱代码爱编程

老司机 iOS 周报,只为你呈现有价值的信息。 你也可以为这个项目出一份力,如果发现有价值的信息、文章、工具等可以到 Issues 里提给我们,我们会尽快处理。记得写上推荐的理由哦。有建议和意见也欢迎到 Issues 提出。 新闻 2018@Swift 大会来了~ 由 SwiftGG 翻译组主办的第三届 @Swift 大会将于 2018

gitchat · 前端 | 浅尝初试 react 技术栈_weixin_33910759的博客-爱代码爱编程

来自 GitChat 作者:余博伦 更多IT技术分享,尽在微信公众号:GitChat 技术杂谈 进入 GitChat 阅读原文 React React 是什么? Facebook 官方对 React 定义是:用来构建用户界面的库(Library)。注意到这里的用词是库(Library)而不是框架(Framework)。Rea

react进阶(3)-上手实践redux-如何改变store中的数据-爱代码爱编程

虽互不曾谋面,但希望能和你成为笔尖下的朋友 以读书,技术,生活为主,偶尔撒点鸡汤 不作,不敷衍,意在真诚吐露,用心分享 点击左上方,可关注本刊 (祝今日天下有情人终成兄妹) 撰文 | 川川 VX-ID:suibichuanji 什么?文章内容不够看,等等.. 点击文末左下方阅读原文,可看视频学习     前言 在前面的一文R

一文了解腾讯云图,让数据说话-爱代码爱编程

一、腾讯云图 数据之美 了解腾讯云图之前,我们先来看看数据可视化? 这是星云图,他表示的是QQ同时在线人数,看到这个图大家脑袋里面想到什么?QQ,蓝钻、绿钻、太阳、月亮、上学的时候跟同学聊天,认识默认网友,你会是这众多闪亮星星中的哪一个呢,进一步分析可以看到沿海地区相对闪亮,结合现实情况,沿海地区设备网络相对发达,年轻化程度高,用户活跃等等。

一文轻松掌握react-hook(useState、useReducer、useEffect、useCallback、useMemo、useRef、useContext...)-爱代码爱编程

前言 react在16版本之后,加入了fiber架构,官方推荐使用纯函数组件,为此react-hook应运而生。 useState useState接收一个初始值,返回的是一个解构出来的数组,第一个是当前状态(似state),第二个是状态的更新函数(似setState),更新函数与react的setState不同的是,useState的更新函数会将状

2020年前端面试复习必读精选文章,必看!!-爱代码爱编程

建议收藏文章,结合复习导图食用,效果更佳。   1. JavaScript 基础   1.1 执行上下文/作用域链/闭包 理解 JavaScript 中的执行上下文和执行栈JavaScript深入之执行上下文栈一道js面试题引发的思考JavaScript深入之词法作用域和动态作用域JavaScript深入之作用域链发现 JavaSc

computed怎么使用_Vue中mixin怎么理解?-爱代码爱编程

作者: qdmryt 转发链接:https://mp.weixin.qq.com/s/JHF3oIGSTnRegpvE6GSZhg 前言 定义: mixin是为了让可复用的功能灵活的混入到当前组件中,混合的对象可以包含任意组件选项(生命周期,指令之类等等), mixin翻译过来叫混合,高级的词汇可以叫插件入侵 简单使用 /

react 最佳入门_推荐18个最佳React.js项目示例「值得收藏」-爱代码爱编程

前言 无论您是编程的新手还是经验丰富的开发人员,您都可能在寻找资源来帮助您构建自己的应用程序。React.js是一个非常流行的前端框架,具有强大的社区,这意味着您可以找到很多项目作为示例。 我们希望简化您的研究工作,因此在本文中,我们将介绍18个React.js项目,它们的复杂程度各不相同,并且可以用作新项目的灵感来源。检查它们还可以帮助

程序员必备的十四款工具,你都用过吗?-爱代码爱编程

大家好,我是“前端点线面”,一位新生代农民工,欢迎关注我获取最新前端知识和大量思维导图(“百题斩”获取《前端百题斩》pdf版;分别回复“go、React、操作系统、Linux、设计模式、js、webpack、nginx、Redux、Vue、Vuex”获取对应学习思维导图,一起卷起来) Apifox 最好用的接口管理神器,没有之一,秒杀市面上所有同

2020年前端面试复习必读文章【超百篇文章赠复习导图】,移动开发工程师的发展路线-爱代码爱编程

重新认识构造函数、原型和原型链JavaScript深入之从原型到原型链最详尽的 JS 原型与原型链终极详解,没有「可能是」。(一)最详尽的 JS 原型与原型链终极详解,没有「可能是」。(二)最详尽的 JS 原型与原型链终极详解,没有「可能是」。(三)JavaScript 引擎基础:原型优化Prototypes in JavaScriptJavaScript

一文快速上手vue之计算属性和侦听器,过滤器_一个风轻云淡的博客-爱代码爱编程

计算属性和侦听器 1、计算属性(computed) 某些结果是基于之前数据实时计算出来的,我们可以利用计算属性。来完成 示例: <div id="app"> <ul> <li>西游记:价格{{xyjPrice}},数量: <input type="number" v-model="xyjNum">&

抖音国庆小游戏是如何实现的?带你走近 cocos-爱代码爱编程

作者简介:唐文城,来自抖音互动技术团队,21 年毕业后持续探索互动技术,参与过若干个抖音活动业务,国庆项目互动玩法与动效核心开发者,喜欢做“可以看见”的事情。 前言 经过若干个月的点滴积累,我有幸参与到抖音国庆活动的开发,这是我第一次完整参与大型活动项目的开发,它是全员关注的一个重点项目,致力于让用户领略美好中国,指导用户在抖音

简单、好懂的 redux middleware 原理-爱代码爱编程

It provides a third-party extension point between dispatching an action, and the moment it reaches the reducer. 这是 redux 作者 Dan 对 middleware 的描述,middleware 提供了一个分类处理 action 的

一文带你全面体验八种状态管理库-爱代码爱编程

动手点关注 干货不迷路 写在前面 状态管理库伴随着数据驱动类框架诞生以来,一直都是个带争议的话题,社区里关于这个方向的讨论文章也是数不胜数,本文写作的目的并不是去详细解答每一款状态库的设计原理和最佳实践,而是希望能从全局视角出发,更全面的了解当下主流状态库的使用体验,同时引导读者告别选择困难症,避免陷入主观臆断,在有充分知识储备的背