React-Redux介绍和基础用法

5 阅读2分钟

React-Redux介绍和基础用法

目的

1、了解并知道Redux是做什么的,用它能解决什么问题。

2、知道如何引入和使用它。

在了解这篇文章之前,你已经跨过了前端知识的入门阶段,并且已经做了一些项目。项目开发过程中你遇到了以下一些情况一直困扰着你,你发现项目中维护这个数据有些混乱,而且变得预发不好扩展:

1、多个组件里面频繁的使用到相同的数据,并且这个数据改变还会造成其它组件的变化

2、在改变那个数据的时候,有时候还需要创建一些额外的数据供我自己和其它组件使用

3、有时候,我还希望那些数据恢复到某个操作之前的状态

4、特别的,还希望这些数据在网页关闭之前,可以随时使用到它。

以上一些情况,也许通过合理的代码优化会让一部分问题得到解决,但是现在有了Redux,一个灵活而轻量的库来帮我们更优雅的解决这些困扰。

当然,Redux并不适合所有项目,在了解以下内容后,我们便可以有自己的判断来是否使用它。

什么是Redux

定义

来自官方的定义:Redux 是一个使用叫做 “action” 的事件来管理和更新应用状态的模式和工具库它以集中式 Store(centralized store)的方式对整个应用中使用的状态进行集中管理,其规则确保状态只能以可预测的方式更新。

重要概念

State

这里可以把它看做是整个项目应用程序的全局数据源,一般把它设计为一个包含若干数据的对象,某些UI的变化依赖State的数据更新,因此这里如何设计State的数据结构变得尤为重要,可以总结出以下2个方面

1、全局性和多组件引用

任何数据都放到State来管理是不可取的,不仅增加数据的复杂性,

2、模块划分

Store

Action

Reducer

Redux使用

定义Store

挂载Store

定义Action

创建Reducer

触发Action

参考

1、官方文档:cn.redux.js.org/tutorials/e…

2、