基于Hooks 的 Redux 速成课

时间: 2019-10-20阅读: 1250标签: Redux

你对 Redux 感到困惑吗?
如果使用新的 Redux Hooks,会更加简单!
这里是一个关于 Redux 的速成班,将配合 react 函数组件使用:


1.

Redux 使您可以集中存放 JavaScript 应用程序的状态(数据

它最常与 react 一起使用(通过 react-redux )

这使您可以从树中的任何组件访问或更改状态。



2.

应用的状态被集中存放于 Redux store

该 store 是使用称为 “reducer” 的函数所创建的

reducer 接受一个 state 和一个 action ,
并返回相同或的状态



3.

使用 react-redux 中的 Provider 来为你的应用提供 store。

使用 Provider 来包装你的应用入口,以便应用程序中的任何组件都可以访问 store 中的数据



4.

要从 store 中取出数据,请使用 react-redux 提供的自定义 hook :useSelector 。

selector 只是一个有趣的词:“从 store 获取数据的功能”

然后,向 useSelector 中传入回调,该回调中可获取整个 redux 的状态,您只需选择该组件所需的内容



5.

action 是普通的 JavaScript 对象

所有 action 均应具有 “type” 键

它们可能还具有其他键(参数)



6.

Actions 不是“调用”的,而是“分配”给 reducer 的
Action 的 type 属性告诉 reducer 接下来该做什么 (返回新状态或旧状态)



7.

要更改 store 中的数据,请首先编写您的 reducer:

reducer 通常使用 switch / case 语句编写,但不是必要的

他们只需要得到一个动作和一个状态,然后返回一个新状态



8.

重要的是,reducer 返回一个新的状态对象(而不是修改旧的对象的属性),这样,当对象中的属性发生某些改变时,组件将重新渲染。

不要在 reducer 中修改 state 中的值,仅返回一个值已经更改的拥有新状态的对象。



9.

要分派 action ,请使用 react-redux 中的自定义 hook: useDispatch

用一个 action 对象来调用 useDispatch,

将传入 reducers 函数并运行,

有可能改变应用的状态



10.

所有连接的组件(调用 useSelector )将自动获得新的状态

就像 props 或者 state 改变一样 - useSelector 将自动检测更改,React 将重新渲染组件。


总结

Redux 可以以更复杂的方式使用,但核心始终是:

  • 1、 向 store 发送 action
  • 2、 通过 reducer 可能会或可能不会改变状态
  • 3、 使用选择器访问状态
  • 4、 状态的改变将自动重新刷新您的应用
原文:Redux Crash Course with Hooks 
作者:Chris Achard
译者:博轩  
站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/6046

解决页面刷新redux数据丢失问题

对于目前普遍的“单页应用”,其中的好处是,前端可以从容的处理较复杂的数据模型,同时基于数据模型可以进行变换,实现更为良好的交互操作。良好的交互操作背后,其实是基于一个对应到页面组件状态的模型,随便称其为UI模型。

从 源码 谈谈 redux compose

compose,英文意思 组成,构成。它的作用也是通过一系列的骚操作,实现任意的、多种的、不同的功能模块的组合,用来加强组件。很容易实现功能的组合拼装、代码复用;可以根据需要组合不同的功能;

动手实现一个react-redux

react-redux 是 redux 官方 React 绑定库。它帮助我们连接UI层和数据层。本文目的不是介绍 react-redux 的使用,而是要动手实现一个简易的 react-redux,希望能够对你有所帮助。

redux之redux-thunk和redux-saga

redux作为状态管理仓库,在我们前端应用中发挥着非常重要的作用,先放一张官方redux flow图片,使用middleWare背景:我们知道redux中数据流是同步的,不支持异步action更新或获取数据,但是在实际项目中异步请求数据绝对是高频出现,并且可以说占据了9成以上的业务场景

在react中使用redux并实现计数器案例

在react中组件通信的数据是单向的,顶层组件可以通过props属性向下层组件传递数据,而下层组件不能向上层组件传递数据,要实现下层组件修改数据,需要上层组传递修改数据的方法到下层组件,当项目越来越的时候

如何优雅地在React项目中使用Redux

Redux:状态管理工具,与React没有任何关系,其他UI框架也可以使用Redux,react-redux:React插件,作用:方便在React项目中使用Redux,react-thunk:中间件,作用:支持异步action

如何使用24行JavaScript代码实现Redux?

Redux是迄今为止创建的最重要的JavaScript库之一,灵感来源于以前的艺术比如Flux和Elm,Redux通过引入一个包含三个简单要点的可伸缩体系结构,使得JavaScript函数式编程成为可能。如果你是初次接触Redux

React项目实战:react-redux-router基本原理

React项目实战:react-redux-router基本原理,Redux 的 React 绑定库包含了 容器组件和展示组件相分离 的开发思想。明智的做法是只在最顶层组件(如路由操作)里使用 Redux。其余内部组件仅仅是展示性的,所有数据都通过 props 传入。

redux 和 mobx 调研结果- mobx

mobx 不同于 redux 的单一数据源的统一管理,它可以有多个 store, 为了便于维护 ,每一个 store 都是一个类,这样便于维护和扩展;mobx 不同于 redux 的单一数据源的统一管理

react关于 Redux与flux的比较学习

flux四大元素:Dispatcher:根据注册派发动作(action),Store: 存储数据,处理数据,Action:用于驱动Dispatcher,View: 用户界面视图。flux的目的:纠正MVC框架的无法禁绝view与model通信的缺点。Redux基本原则:继承Flux基本原则:单向数据流

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!