什么是Redux
Redux 是基于 JavaScript 的状态容器，提供可预测化的状态管理。Redux是一个相当于对flux进行了二次封装的产物，解决了flux中的一些弊端。如果你了解flux，那么看懂本篇文章对你而言就像看懂我脸上的英俊一样容易。
Redux的工作流程
基础配置
-
安装Redux，并在
src目录下创建store文件夹cnpm install redux -S -
在
store文件夹内创建index.js文件——创建公共的内存空间// 引入 creatStore 方法，用来创建公共的内存空间 import { createStore } from 'redux' // 用 createStore 方法创建内存空间并导出 const store = createStore(); export default store;createStore：
- 是一个函数，专门用来创建公共的内存空间
- 参数是一个回调函数
reducers，必须是一个纯函数（不对外界产生影响的函数）
-
在
store文件夹内创建reducers.js文件，导出一个函数作为createStore的回调函数-
当前函数必须是一个纯函数
纯函数的概念：
不对外界产生影响，即传入的参数在纯函数内不会被改变。
输入一定，输出也一定：纯函数的调用参数相同，则永远返回相同的结果
当前函数必须有一个默认的state
当前函数必须要返回一个state
当前函数内部的state只可读，不可改
-
这个函数中有2个参数
-
state
没有初始值，所以需要自己定义一个初始值
-
action
有初始值
-
store/reducers.js文件中：// 定义一个初始的state，用来存储初始数据 const defaultState = { n:10 } export default (state=defaultState,action)=>{ return state; }store/index.js文件中：import {createStore} from 'redux' // 引入reducers函数，并作为参数传递给createStore import reducers from './reducers' const store = createStore(reducers); export default store; -
关于store
在需要使用公共状态管理的地方进行引入 store ，直接输出，会发现它是个对象，身上有几个方法：
-
store.getState()
用来获取公共状态
store中的数据 -
store.dispath(action)
发送
action，提交修改信息。store.dispatch(action)触发之后，赋值给了reducers中的action -
store.subscribe(callback)
侦听
store的更新，绑定一个更新视图的函数
在组件中使用数据
通过 store.getState() 获取
import React, { Component } from 'react'
import store from './store'
export default class App extends Component {
constructor(){
super();
// 直接获取并赋值
this.state = store.getState();
}
render() {
return (
<div>
<h2>{this.state.n}</h2>
</div>
)
}
}
组件中修改数据
-
在组件中，通过
store.dispatch传递修改的action信息import React, { Component } from 'react' import store from './store' export default class App extends Component { constructor(){ super(); // 直接获取并赋值 this.state = store.getState(); } render() { return ( <div> <h2>this.state.n</h2> <button onClick={this.handleClick.bind(this)}>点击增加</button> </div> ) } handleClick(){ // action 一般要单独存储在一个静态文件里，在此引入并使用，为了方便直接写了。 let action = { type:"NUM_ADD" } // `store.dispatch(action)` 触发之后，赋值给了 `reducers` 中的 `action` store.dispatch(action) } } -
在
reducers.js中，根据接收到action的type，做对应的操作。// 定义一个初始的state，用来存储初始数据 const defaultState = { n:10 } export default (state=defaultState,action)=>{ switch(action.type){ case "NUM_ADD": // 因为state不能修改，所以先进行浅拷贝，操作拷贝之后的state let numState = Object.assign({},state); numState.n++; return numState; break; } return state; } -
在更改状态的组件内，用
store.subscribe进行状态变化的侦听，用来更新视图import React, { Component } from 'react' import store from './store' export default class App extends Component { constructor(){ super(); this.state = store.getState(); store.subscribe(this.handleUpdate.bind(this)); } render() { return ( <div> <h2>this.state.n</h2> </div> ) } handleUpdate(){ this.setState(store.getState) } }至此，一个相对完整的 Redux 的基本使用流程就结束了。
使用多个公共状态
依赖： combineReducers
combineReducers可以将 多个 reducer 合并起来，类似于 vuex 中的 modules 。从而达到一个 store 管理多个公共状态（flux的弊端之一）
在 store/index.js 文件中：
import { createStore, combineReducers } from 'redux'
// 引入多个reducers函数，并用 combineReducers 进行合并
import reducer1 from './reducer1';
import reducer2 from './reducer2';
const reducers = combineReducers({reducer1,reducer2})
const store = createStore(reducers);
export default store;
然后即可通过 store.getState().模块名 对不同公共状态进行调用。
