内容简介:本文教你实现一个最简单的 Redux 应用,以及结合 React 如何使用。状态管理工具,使用之后可以清晰的知道应用里发生了什么。数据如何修改,如何更新的。以前我刚接触 Redux 这类状态管理工具的时候就在想:
本文教你实现一个最简单的 Redux 应用,以及结合 React 如何使用。
Redux简介
概念
状态管理工具,使用之后可以清晰的知道应用里发生了什么。数据如何修改,如何更新的。
出现的动机
以前我刚接触 Redux 这类状态管理 工具 的时候就在想: 为什么需要这些东西呢,刷新数据就消失了,也不能持久化存储数据,有啥用呢? 后来慢慢的应用越做越多,功能越做越复杂,就会发现,很多数据什么原因修改的,什么时候修改的,自己是一脸懵逼。啥也想不起来了,维护起来真的痛苦。到了这个时候才发现 Redux 这类工具的厉害之处。名字也很应景的,状态管理工具。说的很清楚了,就是管理状态的。让数据变化过程尽可能的清晰、可预测。
在项目中添加 Redux 并不是必须的。请根据项目需求选择是否引入 Redux
三大原则
-
单一数据源 整个应用的 state 被储存在一棵 object tree 中,并且这个 object tree 只存在于唯一一个 store 中。
-
State 是只读的 唯一改变 state 的方法就是触发 action,action 是一个用于描述已发生事件的普通对象。
-
使用纯函数来执行修改 为了描述 action 如何改变 state tree ,你需要编写 reducers。
Redux 三要素
-
Action(将要发生的操作)
-
Reducer(根据 action 更新 state,是一个纯函数)
- 提供 combineReducers(reducers) 函数组合多个 reducer
-
存放 state 数据的 Store(将 action 和 reducer 联系到一起的对象)
-
提供 getState() 方法获取 state
-
提供 dispatch(action) 方法更新 state
-
通过 subsctibe(listener) 注册监听器
-
通过 subscribr(listener) 返回的函数注销监听器
-
示例代码
说了这边文章是教你创建一个最简单的 Redux 应用,那我们下面就看看使用一个 Redux 到底能有多简单,多快呢。
使用前先引入 Redux: npm install redux -S
-
先来个 Action 三要素之一不就是有 Action 么,有我们就先写一个 Action 创建函数呗
Action 创建函数,是一个返回 action 的函数,非必须这样写,只是更方便移植和复用,建议使用 Action 创建函数来生成 action
function increment() { return { type: "INCREMENT" } } 复制代码
-
有了Action,还要有 Reducer 来执行更新啊 Reducer 既然必不可少,就在写一个 Reducer。(这里可能会有点迷糊,reducer 不是一个对象,而是一个返回更新后 state 的纯函数)
/** * counters 就是一个 reducer,根据传入的 action 的 type 不同,返回一个新的 state 数据 */ // 先初始化 state const initCounter = 0; function counters(state = initCounter, action) { switch(action.type) { case 'INCREMENT': return state ++; default: return state; } } 复制代码
-
还得有一个存放 state 数据的 store 吧 现在要把我们写好的 Action 和 Reducer 连接起来
- 先通过 reducer 创建 store
const { createStore } = require('redux'); const store = createStore(counters); 复制代码
- 通过 store.dispatch(action) 将 action 发送给 reducer,更新 state
store.dispatch(increment()); 复制代码
-
查看结果
就这三步,操作完了吧,那我们现在可以看一下结果了
// 通过 store.getState() 获取 State 数据 console.log('counters: ', store.getState()); // => counters: 1 复制代码
过程总结:
创建一个操作指令 action -> 创建一个 reducer -> 通过 createStore(reducer) 创建一个 store -> 通过 store。dispatch(action) 执行 reducer 中的更新操作,更新 store 中的数据。
这些就是 Redux 的核心用法,有没有感觉很简单的,有兴趣的话可以跟我一起继续往下,看一看结合 React 该如何使用呢。
结合 React 使用
React-Redux
用来组合 React 和 Redux 配合使用的插件
以 create-react-app 脚手架为例,请先使用 create-react-app 创建一个本地项目。本例中默认 create-react-app 已全局安装过了
$ npm npm init react-app react-redux-todos $ cd react-redux-todos 复制代码
插件安装
$ npm install redux react-redux -S 复制代码
配合组件使用
-
在组件根目录使用 react-redux 提供的 Prodiver 标签包裹
import { Provider } from 'react-redux'; <Provider store={ store }> ... </Provider> 复制代码
-
在需要用到 state 或 action 的组件中使用 connect 高阶组件进行包装
import { connect } from 'react-redux'; import { createAction } from './actions' // mapStateToProps 编写方式 const mapStateToProps = (state) => { return { reducer: state.reducer } } // mapDispatchToProps 编写方式 const mapDispatchToProps = (dispatch) => { return { createAction: text => dispatch(createAction(field)); } } // 使用 connect 将 state 和 dispatch 包装到 Component 的属性中 export default connect(mapStateToProps, mapDispatchToProps)(Component); 复制代码
-
在组件中就可以通过 this.props.reducer 和 this.props.createAction 的方式获取数据以及调用 action 了
TodoList 示例
扩展
Reducer 的 combineReducers 方法
当有多个 reducer 时,创建 store 之前需要将它们先进行合并
import { combineReducers } from 'redux'; // 合并成一个 reducers const reducers = combineReducers({ a: doSomethingWithA, b: processB, c: c }); 复制代码
以上所述就是小编给大家介绍的《Redux 基础教程以及结合 React 使用方式》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- Apache使用fcgi方式与PHP结合
- 结合Docker运行Spring Cloud微服务的多种方式
- 用纯 DOM 的方式结合 Puppeteer 自动生成网页骨架屏
- 五花八门的生物识别方式,哪些更成熟,跟金融有什么结合点?
- 代理模式——结合SpringAOP讲解
- 如何结合 Scrum 和 Kanban
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。