As I am sure you have heard a bunch of times, by now, React is the V in MVC. I think you can think of Redux as the M. Really, React + Redux kind of also act as the C.

So, you could just manage your state directly within your React components, and in a really simple app you probably should. However, if your app is going to have a lot of components with various states and likely some sort of user input/data retrieval, that is quickly going to become a pain to manage. This is where Redux can help.

If nothing else, read this section from the docs: http://redux.js.org/docs/introduction/Motivation.html It does a great job of explaining the why.

If Redux is not your thing, you can also check out Mobx. http://mobxjs.github.io/mobx/ Some find this a little easier to grok.

Hope this helps.

Redux and React solve separate problems, but those problems are often found "together" when building apps.

What React does is manage the "view" -- what elements are displayed on the page, what relationship they have to other elements, and what relationships that they hold to each other. In order to do that, React breaks up web pages into little modules called "Components." Each component can have a "component state," which is basically a big object that stores all your data. What's important to know about this object is that whenever you make a change to it, React is smart enough to know that it needs to re-render all the items that were using the information in the component state. That way, you can create apps that respond to user interaction without a whole lot of code.

Flux (of which Redux is an implementation) solves a different problem. Flux doesn't manage views at all, but like a Redux component, it manages the state of your application as a whole. It is designed to be a replacement for the traditional "Model-view-controller" framework.

Generally anything that requires you to use a database, query an API, etc, should probably be handled in a flavor of Flux. If you're just changing the view, you can get buy with just React.

As it turns out, it is possible to build out an application with a React front-end and not use Flux... we essentially built a model-view-controller application where React served as the view for our thesis project at MakerSquare... but Flux works with react because while they solve different problems, they solve those different problems in similar ways.

Redux is a particular type of Flux implementation that allows for a lot of really good features when it comes to debugging and logging, which is why people are raving about it. The learning curve is steep but plateaus -- once you get it, you start to realize why people tend to like it.

React shouldn't be responsible for data. It's View library. React components should hold self-related data (eg.: active, color, etc.)

Also, sometimes two or more components and perhaps something else might need same data - so you obviously cant store it in one component.

Redux, Flux and other *ux, solves all those problems.

Put simply, Redux acts as a store of state. A typical React app defines many different components. These components all require some state to be rendered correctly, e.g. the current user, what's being looked at, etc. Redux shares state globally across all the different components. Having centralized state reduces the complexity of managing the state transitions and makes access easier. Redux also implements the observer patterns, so consumers of state can be notified on state changes and rerendered.

state tree

single source of truth

[转] What is the point of redux when using react?的更多相关文章

  1. Redux:with React(一)

    作者数次强调,redux和React没有关系(明明当初就是为了管理react的state才弄出来的吧),它可以和其他插件如 Angular, Ember, jQuery一起使用.好啦好啦知道啦.Red ...

  2. [Redux] Filtering Redux State with React Router Params

    We will learn how adding React Router shifts the balance of responsibilities, and how the components ...

  3. [Redux] Navigating with React Router <Link>

    We will learn how to change the address bar using a component from React Router. In Root.js: We need ...

  4. 实例讲解react+react-router+redux

    前言 总括: 本文采用react+redux+react-router+less+es6+webpack,以实现一个简易备忘录(todolist)为例尽可能全面的讲述使用react全家桶实现一个完整应 ...

  5. react+redux官方实例TODO从最简单的入门(6)-- 完结

    通过实现了增-->删-->改-->查,对react结合redux的机制差不多已经了解,那么把剩下的功能一起完成吧 全选 1.声明状态,这个是全选状态 2.action约定 3.red ...

  6. Redux教程2:链接React

    通过前面的教程,我们有了简单的环境,并且可以运行Redux的程序,也对 如何编写Redux示例 有了初步的印象: 掌握了 使用Redux控制状态转移 ,继而驱动 React 组件发生改变,这才是学习R ...

  7. 使用Redux管理你的React应用

    因为redux和react的版本更新的比较频繁,博客园这里用的redux版本是1.0.1,如果你关心最新版本的使用技巧,欢迎来我的Github查看(https://github.com/matthew ...

  8. Redux你的Angular 2应用--ngRx使用体验

    Angular2和Rx的相关知识可以看我的Angular 2.0 从0到1系列第一节:Angular 2.0 从0到1 (一)第二节:Angular 2.0 从0到1 (二)第三节:Angular 2 ...

  9. Redux管理你的React应用

    使用Redux管理你的React应用   因为redux和react的版本更新的比较频繁,博客园这里用的redux版本是1.0.1,如果你关心最新版本的使用技巧,欢迎来我的Github查看(https ...

随机推荐

  1. 从文章"避免复制与粘贴"到文章"Extract Method"的反思(2)

    好了.在上一篇里面讲了讲怎么把临时变量应该从函数里面剔除去.这个过程叫做从临时变量变成查询 那么接下来我们聊聊把代码提炼成函数,有叫做用函数对象取代函数 那么,问题来了:在函数中什么样的代码是需要被提 ...

  2. html5 中的 css样式单 的 两种调用方式的区别

    在 html5 中 使用 css 样式单的方式 有4种: 1.链接外部样式文件:将样式文件 彻底与 html 文档分离,样式文件需要额外引入,这种情况下 一批样式 可以控制多份文档.对于好多文件都共有 ...

  3. appFramework在三星某些机型上的兼容问题

    有个问题困扰了安卓哥好几天 一个带有fixed抬头的列表页,在向上swipe的时候,有一定概率会把整个画面滚动上去,就连fixed的部分也移动了. 于是哥觉得是webview的问题,找了各种选项,禁用 ...

  4. 【转】django的ORM操作数据库样例

    这个算是我看到的大全了,希望可以解决明天我希望解决的两个问题... class Blog(models.Model): name = models.CharField(max_length=100) ...

  5. Eclipse的设置小细节提高开发效率

    1. 自动联想功能增强 preference->java->Editor->Content Assist中, Auto activation triggers for java中默认 ...

  6. Redis监控

    首先判断客户端和服务器连接是否正常 # 客户端和服务器连接正常,返回PONG redis> PING PONG # 客户端和服务器连接不正常(网络不正常或服务器未能正常运行),返回连接异常 re ...

  7. ubuntu下virtualbox使用u盘

    1.virtualbox中使用u盘流程 以下是使用U盘的整个流程(参考了网络上其他人的教程,亲测可用): 添加当前用户为vboxusers一员 终端输入:cat /etc/group |grep vb ...

  8. vsftp被动模式启用iptables访问设置

    vsftpd服务搭建好之后,如果是使用主动模式访问.那么启用iptables只需添加以下规则即可: -A RH-Firewall-1-INPUT -m state --state NEW -m tcp ...

  9. ​? super T ? extends T

    ​? super T ?保存的是  T类型或者T类型的父类 ​ ? extends T ?保存的是  T类型或者T类型的子类

  10. git cherry-pick 从其他分支检出指定的commit到当前分支

    http://think-like-a-git.net/sections/rebase-from-the-ground-up/cherry-picking-explained.html Git's o ...