## 一、Redux简介 > React 只是 DOM 的一个抽象层，并不是 Web 应用的完整解决方案。有两个方面，它没涉及：*代码结构、组件间的通信*。 为了解决这个问题，2014年 Facebook 提出了 Flux 架构的概念，引发了很多的实现。2015年，Redux 出现，将 Flux 与函数式编程结合一起，很短时间内就成为了最热门的前端架构。 > Redux：简言之，一个状态机。就像vue的vuex一样，负责项目的单独的state状态管理，通过redux可以实现全局的状态管理，所有的state都在一个store对象中保存。当然，redux并不是react的标配，如果项目简单，交互并不负杂，组件间通信不频繁，不用websocket等就可以不用redux。 > Redux的设计思想： 1. Web应用是一个状态机，视图与状态是一一对应的。 2. 所有的状态，保存在一个对象里面。 ## 二、基本使用 > redux使用最频繁的三个方法： `store.getState()`,`store.dispatch({type:'xx'})`,`store.subscribe(fn)` > 使用redux的基本步骤： 1. **引入**： ``` import {createStore} from 'redux' ``` 2. **创建reducer** ``` // action.type是必须属性 function counter(state=0,action){ switch (action.type) { case 'INCREMENT': return state + 1; case 'DECREMENT': return state - 1; default: return state; } } let store = createSotre(counter); export default store; ``` 3. **组件中引入store的状态** ``` import store from 'reducer/store.js'; # 伪代码 render(){ return(<div> state:{store.getState()} <button onClick={()=>store.dispatch({type:'INCREMENT'})}>加一</button> <button onClick={()=>store.dispatch({type:'DECREMENT'})}>减一</button> </div>) } ``` > 如上dispatch传入参数为一个对象，其中type为必须属性 > store.dispatch()触发state改变 > store.getState()获取state 4. **监听state的变化，自动刷新view层** ``` # index.js const render = ()=>ReactDOM.render(<App />, document.getElementById('root')); render(); store.subscribe(render); ``` > 如上：`store.subscribe(fn)`传入一个函数来监听state的变化，当dispatch触发时，会自动调用fn。 > 通过将原来的 ReactDOM.render进行函数包装，传入subscribe实现监听。 > `store.subscribe(fn)`会返回一个函数，用于清除监听。 5. **触发state变化** ``` store.dispatch({type:'INCREMENT'}) ``` ## 二 、Redux核心 > Redux的使用包含以下几个核心概念： - `Action`： view层触发model改变的方法 - `Reducer`：改变state的处理函数 - `Store`：存储State的对象，包含操作state的方法