React Redux
是什么
React Redux 是 Redux 的 React 版,Redux 本身独立于其他框架而存在,又可以结合其他视图框架使用,比如此处的 React。
干嘛的
按个人理解,Redux 是应用的状态管理框架,以事件流的形式来发送事件、处理事件、操作状态和反馈状态。
这么说还是太抽象了,举个简单的例子。比如有个 A 组件,它要改变它自己的一个 div 里面的文字,假设这个文字内容由 this.props.content 决定,那么它可以发送一个事件,这个事件经过一系列的处理,最终会改变 this.props.content。
龟龟,这也太秀了吧,改个文字都得这么复杂?没错,如果是这种情况去用 React Redux,那简直就是画蛇添足,没事找事。这里有一篇文章 You Might Not Need Redux,可以考虑自己编写的应用,是否真的需要 React Redux。
回到上面的例子,倘若 A 组件要去改变同级的一个 B 组件里面的文字呢?按照我们之前的做法,我们会在 A B 组件的上一层套上一个 Parent 组件,将修改 B 组件文字的方法传给 A 组件,A 组件调用后改变 Parent 组件的 state,进而改变 B 组件的文字。
那么我们的代码大约是这个样子:
//Parent 组件 render() { return ( <div> <A onClick={(newContent) => this.setState({content: newContent})}/> <B content={this.state.content}/> </div> ) } //A 组件 render() { return ( <div onClick={() => this.props.onClick('This is new content for B')}>Change B's content</div> ) } //B 组件 render() { return ( <div>{this.props.content}</div> ) }
有点费劲呢…可是我们总算实现了功能~
什么?多加了个同级的 C 组件,也要 A 组件来改变里面的文字…
什么?有个深度为 100 的组件,要它来改变 B 组件的文字…
我胖虎出去抽根烟,回来要看到这两个功能实现,不然锤死在座各位。
为了实现这两个功能,回调函数满天飞,特别是第二个功能,你得把回调函数往下传 100 层…
差不多这个时候,你就该考虑 React Redux 了。
像第二个功能,只需要从深层的组件发送一个事件出来,这个事件最终就会改变 B 组件的文字。
嗬,听起来不错。
讲了这么多,是时候一睹 React Redux 的真容。
其中 Action、Dispatch 和 Reducer 都是 React Redux 的东西,View 则是代表我们的视图层 React。
先理清几个概念:Store,Action 和 Reducer(Dispatch 是 Store 的一个方法)
Store 是整个 React Redux 应用总的状态容器,是一个对象
Action 也是一个对象,表明事件,需要有 type 字段
Reducer 是一个函数,会根据不同 Action 来决定返回不同的数据
从上面的图看到 View 层可以通过两种方式来更新:
View 层发出 Action,Dispatch 之后到达 Reducer,Reducer 处理后返回新的东西去更新 View
其它层发出 Action 以同样的方式来更新 View
上面无论哪一种方式,都是遵循单向数据流的规则,即:发送 Action -> Reducer 根据 Action 返回数据 -> Store 被更新 -> View 被更新。
Store
Store 就是保存数据的地方,你可以把它看成一个容器。整个应用只能有一个 Store。
import { createStore } from 'redux'; const store = createStore(fn);
createStore可以接受一个函数作为参数,返回新生成的store对象。
State
Store对象包含所有数据。如果想得到某个时间点的数据,就要对 Store 生成快照。这种时间点的数据集合,就叫做 State。State存在于Store中。可以通过 store.getState()得到
import { createStore } from 'redux'; const store = createStore(fn);const state = store.getState();
Redux 规定, 一个 State 对应一个 View。只要 State 相同,View 就相同。
Action
State 的变化,会导致 View 的变化。但是,用户接触不到 State,只能接触到 View。所以,State 的变化必须是 View 导致的。Action 就是 View 发出的通知,表示 State 应该要发生变化了。State的唯一办法就是使用Action,他会负责把数据送到store中的。
const action = { type: 'ADD_TODO', payload: 'Learn Redux' };
这里Action的类型是:“ADD_TODO”,携带的信息是:‘Learn Redux’。
Action是一个对象,type属性是必须的,表示Action的名称或者类型,其他属性可以自由设置,来携带自己需要的信息。一般来说State就是由Action的type值进行判断,然后改变的
- React知识点
- create-react-app脚手架实现antd或antd-mobile的按需加载
- 通过cross-env改变create-react-app默认启动端口号
- 解决create-react-app打包后, 本地打开页面空白的问题
- 1 react 入门
- 2 react数据渲染
- 使用Visual Studio Code和typescript 开发调试React Native项目
- React 使用browserHistory项目访问404问题
- react实现新冠疫情表格
- 正则改造VS Code里React类组件的自定义snippet
- 解决react装饰器报错问题
- 解决react-redux报错问题
- React框架入门---React.Component 生命周期函数整理
- react a标签跳转问题
- react子组件触发父组件事件
- react组件起步
- react起步
- ESLine配置使用(react,babel,webpack)
- React生命周期
- react withRouter