Redux入门教程（一）（基本应用） Redux入门教程（一）：基本应用

一、Redux简介先来po一下redux官网地址，如下：
redux官网：https://redux.js.org/introduction/getting-started
如官网中所说的：Redux is a predictable state container for JavaScript apps.
Redux是一个用于JavaScript应用的可预测状态容器。
可预测：这源于reducer是个纯函数(怎样的输入必有怎样的输出)，reducer接收旧状态和action集合，经过某些操作返回新状态，其状态规则都是开发者站在上帝视角设定好的，新状态可预测。
状态容器：store用来存储state，集中统一管理状态树状结构。
Javascript应用：Redux是独立的一个库，可通用于各种JavaScript应用，不仅仅是react。
二、Redux模型接着我们要弄清楚Redux模型中的几个组成部分：action 、reducer、store
action：
View的展示是根据State数据而来的，想要View变化，只能改变State（存在store里），想要修改State就必须发出一个action通知，store接收到通知后处理state，从而改变View。
Action 是一个对象。其中的type属性是必须的，表示 Action 的名称。其他属性可以自由设置，如下：

const action = { type: 'ADD_TODO', payload: 'Learn Redux' };

【Redux入门教程（一）（基本应用）】社区规范：https://github.com/acdlite/flux-standard-action
上面代码中，Action 的名称是ADD_TODO，它携带的信息是字符串Learn Redux。
reducer：
Reducer 函数最重要的特征是，它是一个纯函数。也就是说，只要是同样的输入，必定得到同样的输出。
纯函数是函数式编程的概念，必须遵守以下一些约束，比如：
①不得改写参数
②不能调用系统 I/O 的API
③不能调用Date.now()或者Math.random()等不纯的方法，因为每次会得到不一样的结果
例如一个reducer可以是这样的：

const reducer = (state = 0, action) => { switch (action.type) { case 'INCREMENT': return state + 1; case 'DECREMENT': return state - 1; default: return state; } };

store：
store就是把action和reducer联系到一起的对象，store本质上是一个状态树，保存了所有对象的状态。任何UI组件都可以直接从store访问特定对象的状态，其具有dispatch，subscribe，getState方法（敲黑板划重点）。
介绍每个方法之前，先来看一下store是如何创建的和其实现。以react为例一般我们创建store的时候是这样的：

import { createStore } from 'redux'; const reducer = (state = 0, action) => { switch (action.type) { case 'INCREMENT': return state + 1; case 'DECREMENT': return state - 1; default: return state; } }; let store = createStore(reducer); export default store;

可见首先是从redux的依赖包里引入createStore方法，根据需要定义一个reducer，用这个reducer做参数创建store，那么这个createStore是如何创建的store呢？
createStore的简单实现如下：

const createStore = (reducer) => { let state; let listeners = []; const getState = () => state; const dispatch = (action) => { state = reducer(state, action); listeners.forEach(listener => listener()); }; const subscribe = (listener) => { listeners.push(listener); return () => { listeners = listeners.filter(l => l !== listener); } }; dispatch({}); return { getState, dispatch, subscribe }; };

由此可见，getState可以拿到当前的state，dispatch可以传入action到store并执行reducer和listener函数，subscribe可以增加一个监听函数，接下来一一细说。
1.store.dispatch() store.dispatch()是 View 发出 Action 的唯一方法，这就需要在View中引入store然后调用dispatch派发Action，dispatch一调用就会调用reducer来改变state从而改变View。一般写法如下：

store.dispatch({type:"INCREMENT"});

2.store.subscribe() Store 允许使用store.subscribe方法设置监听函数，一旦 State 发生变化，就自动执行这个函数。
为什么能设置监听函数？
因为上面说过createStore函数里定义的subscribe调用一次就增加一个listener，注意监听函数listener不是去监听的函数，而是监听到state变化要执行的函数。
为什么一旦state变化就会执行listener呢？
因为但你想要改state的时候会去dispatch(action),就是调用dispatch了，上面createStore函数里定义的dispatch里除了要执行reducer还要执行listener。
subscribe一般写法如下：

import { createStore } from 'redux'; const store = createStore(reducer); store.subscribe(listener);

解除监听：
store.subscribe方法返回一个函数，调用这个函数就可以解除监听。

let unsubscribe = store.subscribe(() => console.log(store.getState()) ); unsubscribe();

3.store.getState() getState方法可以获取返回当前state的值，可以在任意位置打印state的值如下：

console.log(store.getState());

三、Redux工作流程如下的流程图是个经典的redux工作流，上面说了这么多可以再回味一下。

文章图片
image.png 四、实例：计数器先上一个效果图：

文章图片
counter.gif
代码见github仓库： https://github.com/Amy-Tong126/redux-demo
五、小结：这里梳理了一下个人使用redux编程开发思路，步骤如下：
①构建state：
接到需求后，先思考当前的View是什么样的数据构成的，写出View背后的state数据，例如的计数器只需要一个数字；
②抽象出Action和Reducer：
思考View将会有怎样的操作和变化，例如计数器点击＋按钮数字增加1，点击-按钮数字减少1，由此抽象出action，和reducer函数如何改变state；
③创建store，并调用方法：
用写好的reducer去创建store，再在react组件需要的地方调用store的各种方法，来派发action，设置监听函数，或者获取当前状态。
当编写新的功能模块时，要重复上面的顺序对各个部分进行添加。