react 里面的Reducer

最新推荐文章于 2024-08-06 13:54:57 发布
原创 最新推荐文章于 2024-08-06 13:54:57 发布 · 2k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#react.js #javascript #前端 #typescript

本文介绍了如何在React中结合useReducer Hook、useContext以及组合技术来更方便地管理状态。首先创建一个ReducerHook组件，然后利用React.createContext创建一个上下文。ReducerHook组件导入上下文，并通过props.children进行组合。后续组件可以通过useContext Hook直接访问Reducer仓库，实现状态的便捷管理和共享。

Reducer这个Hook里面有三个参数第一个是一个回调函数，第二个是一个对象，第三个也是一个回调函数修改第二个参数对象里面的内容然后直接返回给第一个回调函数

如果要在react里面更方便的使用Reducer这个Hook

需要结合useContext和组合才能实现

首先先创建一个组件实现一个Reducer Hook

接着就是使用React.createContext创建一个ts文件并导出

 然后 Reducer Hook这个组件导入React.createContext创建的这个ts文件然后通过组合（props.children）这个方法成为生产者

 

后面的组件如果想使用Reducer仓库的话就可以引入React.createContext文件直接使用useContext这个Hook就可以啦

 

react使用中的原生reducer的使用的微小总结
m0_48719725的博客
09-19 885
React写app--原生reducer使用的微小工作总结1.工作目录2.从接口到组件数据传递 1.工作目录 只是以我的项目举例子，还会更新，现在只是一个备份 actions 把reducers中接口（大写）转成小写的中转站 constans config.js : 蓝色是自己起的接口名，后面是接口文档的接口地址 containers conponrnt组件的集合点，相当于pages reducers ：分为上下两个部分，上面就是全局的state（数据是从下面接口方法中拿来的），下
大白话详细解读React框架中的reducer
最新发布
ThomasChan123的博客
03-19 1501
大白话详细解读React框架中的reducer
ts版本react reducer
劲枫的博客
09-15 562
定义 // action-type的类型 export const UPDATE_EXPANDEDROW = 'UPDATE_EXPANDEDROW'; // state的类型 export type RowkeyType = PrimaryTableProps['expandedRowKeys']; // action的类型 type ExpandAction = { type?: typeof UPDATE_EXPANDEDROW; payload?: RowkeyType }; // redu.
react之reducers
weixin_73918953的博客
05-10 1666
把 useState 转换成 useReducer：通过事件处理函数 dispatch actions;编写一个reducer函数，他接受传入的state和一个action，并返回一个新的state；使用useReducer 替换 useStateReducers 可能需要你写更多的代码，但这有利于代码的调试和测试Reducers必须是纯净的每个action 都描述了一个单一的用户交互使用 Immer 来帮助你在reducer里直接修改状态。
react- reducer
weixin_42454747的博客
05-25 859
useState和useReducer的使用方法和区别
react-reducer
04-19
Create React App入门 该项目是通过引导的。 可用脚本 在项目目录中，可以运行： yarn start 在开发模式下运行应用程序。 打开在浏览器中查看它。 如果您进行编辑，则页面将重新加载。 您还将在控制台中看到任何...
react_reducer
05-23
Create React App入门 该项目是通过引导的。 可用脚本 在项目目录中，可以运行： npm start 在开发模式下运行应用程序。 打开在浏览器中查看它。 如果您进行编辑，则页面将重新加载。 您还将在控制台中看到任何...
react-reducer-example
04-11
Create React App入门 该项目是通过引导的。 可用脚本 在项目目录中，可以运行： yarn start 在开发模式下运行应用程序。 打开在浏览器中查看它。 如果您进行编辑，则页面将重新加载。 您还将在控制台中看到任何...
reducer在react使用
lastone1212的博客
06-01 1369
编写store.js 小state reducer 怎么来 纯函数 state+action 生成新的state actions type re
图文并茂五分钟搞懂react中的reducer
tangdou369098655的博客
06-09 5533
Reducer 是处理状态的另一种方式。通俗来讲，就是可以让你的复杂组件更加干净，代码更加优雅当你的组件里有好多个状态更新逻辑，并且有些是有一定关联性的，写多个useState会看起来很杂乱，为解决这个问题，我们可以将多个状态更新逻辑整合到一个外部函数，这个函数就是reducer整合业务逻辑。
react的reducer 拆分
RuiKe的博客
10-12 3356
组件间通信：https://blog.csdn.net/RuiKe1400360107/article/details/82992506 redux的用法：https://blog.csdn.net/RuiKe1400360107/article/details/83023732 flux架构：https://blog.csdn.net/RuiKe1400360107/article/deta...
react--划分Reducer
郑怪兽
09-08 828
划分Reducer 在一个复杂的尤其是单页面的应用中，为了提高开发效率，我们都会采取协同开发的模式，因为系统的模块较多，各个大的功能板块都较为独立，而redux有一个思想：单一数据源，也就是store只能有一个。 所以，我们多会使用划分reducer的方法，将每个大板块所需维护的状态划分在不同的reducer中去管理，分别有自己的一套结构，再通过combineReducers合并在一起 需要注意的是，划分reducer之后，store会将数据也去根据划分之后的reducer来进行分开管理 src/store
React Reducer 的作用
My_wife_QBL的博客
08-06 1385
首先，我们需要定义 Todo 的状态和 reducer。todos: [],default:在 React 中，Reducer 是管理复杂状态的强大工具，特别是在应用需求变得复杂时。通过使用useReducer钩子，开发者可以清晰、可预测地管理组件的状态，同时使代码更具可维护性。本文探讨了 Reducer 的定义、作用、使用场景、设计模式以及实战示例。希望能够为你在使用 React 进行状态管理时提供参考，帮助你构建更高效、更可维护的 React 应用。
react + redux 完整的项目，同时写一下个人感悟
weixin_33898876的博客
11-30 3024
先附上项目源码地址和原文章地址：https://github.com/bailicangd... 做React需要会什么？ react的功能其实很单一，主要负责渲染的功能，现有的框架，比如angular是一个大而全的框架，用了angular几乎就不需要用其他工具辅助配合，但是react不一样，他只负责ui渲染，想要做好一个项目，往往需要其...
React useReduce useCallback使用
weixin_44530344的博客
09-18 954
Reducer横空出世，reduce单词中文意味减少，而reducer我觉得可以翻译为“当你的state的过于复杂时，你就可以使用的可以对state进行整合的工具”。当然这是个玩笑话，个人认为Reducer可以翻译为“整合器”，它的作用就是将那些和同一个state相关的所有函数都整合到一起，方便在组件中进行调用。当然工具都有其使用场景，Reducer也不例外，它只适用于那些比较复杂的state，对于简单的state使用Reducer只能是徒增烦恼。
React学习笔记_动态注入reducer
热门推荐
架构师的成长之路的博客
12-01 1万+
Redux store 的动态注入reducer更多干货React 入门实战（干货）分布式实战（干货）spring cloud 实战（干货）mybatis 实战（干货）spring boot 实战（干货）构建中小型互联网企业架构（干货）在 React + Redux + React-Router 的单页应用架构中,我们将 UI 层（ React 组件）和数据层（ Redux store ）分离开来...
React之React-Redux
猫老板的豆
07-08 464
## Redux 与 React-Redux 区别 与`redux`比较，`React-redux`更为简洁，只要在`mapStateToProps`中绑定的`state`或者`action`就直接可以在组件的`props`中获取到，这样`state`与`action`在`mapStateToProps`统一管理，使用起来很方便。 更重要的是，`React-Redux`自己会监听`state`的变化进行更新，而`redux`需要手动的在生命周期`componentDidMount`中通过`store.su
前端学习（3171）：react-hello-react之reduce
歌谣的博客
07-11 826
React-redux详解(一)
Youyzq的博客
11-04 1040
简介 因为在react中都是按需引入，为了防止文件过大，并且redux出现的场景不多，所以就需要自行下载，在脚手架中并未下载redux 如何下载？ `yarn add redux` `npm i redux` 什么是redux呢？ redux 就相当于 vuex(如果是学习过vue的小伙伴理解起来就非常轻松啦) ，就是数据状态管理模式，当我们要做的项目中有很多组件需要共享数据时，这时候就可以用 redux 搭建。 Redux 适用场景 首先明确一点，Redux是一个有用的架构，但不是非用不可。事实上
React context reducer结合使用
06-02
React Context 结合 Reducer 可以实现状态管理和状态更新的功能。Reducer 是一个纯函数，接收当前的状态和一个 action，返回一个新的状态。通过 Context 和 Reducer 的结合使用，可以将状态和状态更新逻辑分离到不同的文件中，使得组件的代码更加简洁和清晰。 下面是一个示例代码： ```jsx // 创建一个 context 对象 const MyContext = React.createContext(); // 定义 reducer 函数 function reducer(state, action) { switch (action.type) { case "increment": return { count: state.count + 1 }; case "decrement": return { count: state.count - 1 }; default: throw new Error(); } } // 父组件 function ParentComponent() { const [state, dispatch] = useReducer(reducer, { count: 0 }); // 将 reducer 的 dispatch 函数作为属性传递给子组件 return ( <MyContext.Provider value={{ state, dispatch }}> <ChildComponent /> </MyContext.Provider> ); } // 子组件 function ChildComponent() { // 使用 useContext 钩子获取父组件提供的 context 对象 const { state, dispatch } = useContext(MyContext); return ( <div> <p>当前的计数：{state.count}</p> <button onClick={() => dispatch({ type: "increment" })}>增加</button> <button onClick={() => dispatch({ type: "decrement" })}>减少</button> </div> ); } ``` 在上面的代码中，父组件中使用 `useReducer` 钩子创建了一个状态以及一个 dispatch 函数。将状态和 dispatch 函数通过 Context 提供给子组件。在子组件中，通过 `useContext` 钩子获取父组件提供的 state 和 dispatch 对象。当用户点击子组件中的增加或减少按钮时，会调用 dispatch 函数并传入对应的 action 对象，从而触发状态更新，更新后的状态会自动传递给所有使用了该 Context 的组件，实现了状态的管理和更新。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值