标签:ast 输出 有一个 cas 脚手架 使用 注销 cti red
本文教你实现一个最简单的 Redux 应用,以及结合 React 如何使用。
状态管理工具,使用之后可以清晰的知道应用里发生了什么。数据如何修改,如何更新的。
以前我刚接触 Redux 这类状态管理工具的时候就在想:为什么需要这些东西呢,刷新数据就消失了,也不能持久化存储数据,有啥用呢? 后来慢慢的应用越做越多,功能越做越复杂,就会发现,很多数据什么原因修改的,什么时候修改的,自己是一脸懵逼。啥也想不起来了,维护起来真的痛苦。到了这个时候才发现 Redux 这类工具的厉害之处。名字也很应景的,状态管理工具。说的很清楚了,就是管理状态的。让数据变化过程尽可能的清晰、可预测。
在项目中添加 Redux 并不是必须的。请根据项目需求选择是否引入 Redux
单一数据源 整个应用的 state 被储存在一棵 object tree 中,并且这个 object tree 只存在于唯一一个 store 中。
State 是只读的 唯一改变 state 的方法就是触发 action,action 是一个用于描述已发生事件的普通对象。
使用纯函数来执行修改 为了描述 action 如何改变 state tree ,你需要编写 reducers。
Action(将要发生的操作)
Reducer(根据 action 更新 state,是一个纯函数)
存放 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 连接起来
const { createStore } = require(‘redux‘);
const store = createStore(counters);
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 和 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 了
当有多个 reducer 时,创建 store 之前需要将它们先进行合并
import { combineReducers } from ‘redux‘; // 合并成一个 reducers const reducers = combineReducers({ a: doSomethingWithA, b: processB, c: c });
调用 store.subsctibe(listener) 注册监听事件 store 中的数据发生变化时,就会调用 listener 函数
/** * 通过 store.subscribe(function) 注册一个监听器。每次 state 更新时,都会打印输出日志 */ store.subscribe(() => console.log(store.getState()));
store.subscribe(listener) 的返回值是一个 注销监听的函数
/** * store.subscribe(func) 会返回一个函数,执行这个函数可以注销监听器 */ // 返回一个函数 unsubscribe const unsubscribe = store.subscribe(() => console.log(store.getState())); // 执行这个函数可以注销监听器 unsubscribe();
原链接:https://juejin.im/post/5c34394b518825261c1b773d,来源:掘金
标签:ast 输出 有一个 cas 脚手架 使用 注销 cti red
原文地址:https://www.cnblogs.com/GenuisZ/p/12129524.html