在vue中，我们使用Vuex来管里我们项目中的数据，而在React中，我们同样有相应地数据管理工具Redux。Vuex和Redux要解决的问题是，在全局状态下，对某一数据进行管理，保证在各个组件中都能操作和使用同一数据。单从解释来，很像我们在全局设置的变量。在不使用这类型的工具，组件和组件之间的传递单单依靠父子组件的方式，那么对性能将是一种非常大的损害。下图是是使用Redux和不使用Redux进行组件间数据管理的概念图，从图中，可以很直观地感受到我们上面所说的结论。
一、Redux的工作流程
上图是Redux的工作流程图。对于初学者来说，要理解这个图还是需要花一点心思的，即便之前已经掌握的，后面也会遗忘掉。这里我借助慕课网金牌讲师
Dell lee就这个模型举的例子来描述一下这张图。
首先，我们将整个过程想象成图书馆书籍管理系统。React Components是一个要借书的同学，Action Creators是借书同学说的一句话，比如（我要借一本《JavaScript高级编程》），Store是图书馆管理员,Reducers是管理员手里的用于记录书籍信息的笔记本。按照这样解释后，上面的图我们可以做一些修改。如下图所示：
那么，我们来看一下整个流程吧。
1、借书的同学React Components说一句话Action Creators，我要借一本《JavaScript高级编程》。
2、图书馆管理员Store听到这句话，但是她也不知道《JavaScript高级编程》这本书放在什么地方，需要查找记录书籍信息的笔记本Reducers。
3、等查到之后，图书馆管理员Store把查到的信息提供给借书的同学React Components。
将上面的例子转化为我们的代码逻辑如下：
1、React Components通过dispatch(action)将操作数据的请求发送给Store。
2、Store直接将action提交给Reducers,Reducer在处理完数据action之后，将处理结果返回给Store。
3、Store再将结果返回给React Components。
二、Redux具体的实现
下面的所有实例我们将通过实现TodoList这个功能来演示,同时也使用可antD。跟Store相关的内容，我们都会放在同一个文件夹中，文章末尾，我会将目录结构图给出。
1、安装redux。
yarn add redux
2、创建```store``。
创建的时候时候一定要把我们的记录本带上。
/src/store/inex.js
import { createStore } from 'redux'
import reducer from './reducer'
const store = createStore(
reducer,
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
)
export default store
3、创建```Reducers``。
在创建记录本的时候，我们可以为其设置一些默认的属性值。
/src/store/reducer.js
const defaultState = {
inputValue: 'dddd',
list: [111,222,333]
}
export default (state = defaultState, action) => {
return state
}
4、使用Store。
在组件中，我们通过store.getState()方法获得Store中的数据。通过下面的方式进行访问this.state.list和this.state.inputValue进行访问。
/src/TodoList.js
import React, { Component } from 'react'
import { Input, Button, List } from 'antd';
import store from './store'
import 'antd/dist/antd.css'
class TodoList extends Component{
constructor(props){
super(props)
this.state = store.getState()
this.handleStoreChange = this.handleStoreChange.bind(this)
store.subscribe(this.handleStoreChange)
}
render(){
return (
{item} }
/>
)
}
/*同步数据*/
handleStoreChange(){
this.setState(store.getState())
}
}
export default TodoList
5、组件提交action，修改Store中的数据。
1、input数据双向绑定
render(){
return (
{item} }
/>
)
}
handleInputChange(e){
const action = {
type: 'change_input_value',
value: e.target.value
}
store.dispatch(action)
}
reducer.js
reducer 可以接受 state，但是绝对不能修改state。
export default (state = defaultState, action) => {
if(action.type === 'change_input_value'){
const newState = JSON.parse(JSON.stringify(state))
newState.inputValue = action.value
return newState
}
return state
}
上面的逻辑就可以流通了。下面我们依葫芦画瓢，完成TodoList功能。
2、增加列表项功能
handleAddItem(){
const action = {
type: 'add_input_value',
}
store.dispatch(action)
}
reducer.js
export default (state = defaultState, action) => {
...
if(action.type === 'add_input_value'){
const newState = JSON.parse(JSON.stringify(state))
newState.list.push(newState.inputValue)
newState.inputValue = ''
return newState
}
}
...
3、删除列表项功能
{item} }
...
/>
handleItemDelete(index){
const action = {
type: 'delete_todo_item',
index
}
store.dispatch(action)
}
reducer.js
export default (state = defaultState, action) => {
...
if(action.type === 'delete_todo_item'){
const newState = JSON.parse(JSON.stringify(state))
newState.list.splice(action.index, 1)
return newState
}
...
}
至此，使用了Redux之后的TodoList功能已经完成，我们掌握了Redux的用法。
三、优化Redux代码
1、ActionTypes拆分，常量化action中的type值，减少单词拼接错误
/src/actionType.js
export const CHANGE_INPUT_VALUE = 'change_input_value'
export const ADD_TODO_ITEM = 'add_input_value'
export const DELETE_TODO_ITEM = 'delete_todo_item'
TodoList.js
import { CHANGE_INPUT_VALUE, ADD_TODO_ITEM, DELETE_TODO_ITEM} from './store/actionTypes'
handleInputChange(e){
const action = {
type: CHANGE_INPUT_VALUE,
value: e.target.value
}
store.dispatch(action)
}
handleAddItem(){
const action = {
type: ADD_TODO_ITEM,
}
store.dispatch(action)
}
handleItemDelete(index){
const action = {
type: DELETE_TODO_ITEM,
index
}
store.dispatch(action)
}
Reducer.js
import { CHANGE_INPUT_VALUE, ADD_TODO_ITEM, DELETE_TODO_ITEM} from './actionTypes'
const defaultState = {
inputValue: '',
list: []
}
export default (state = defaultState, action) => {
if(action.type === CHANGE_INPUT_VALUE){
const newState = JSON.parse(JSON.stringify(state))
newState.inputValue = action.value
return newState
}
if(action.type === ADD_TODO_ITEM){
const newState = JSON.parse(JSON.stringify(state))
newState.list.push(newState.inputValue)
newState.inputValue = ''
return newState
}
if(action.type === DELETE_TODO_ITEM){
const newState = JSON.parse(JSON.stringify(state))
newState.list.splice(action.index, 1)
return newState
}
return state
}
2、使用actionCreator统一创建action，方便调用，易于测试
/src/store/actionCreator.js
import { CHANGE_INPUT_VALUE, ADD_TODO_ITEM, DELETE_TODO_ITEM} from './actionTypes'
export const getInputChangeAction = (value) => ({
type: CHANGE_INPUT_VALUE,
value
})
export const getAddItemAction = () => ({
type: ADD_TODO_ITEM
})
export const getDeleteItemAction = () => ({
type: DELETE_TODO_ITEM
})
TodoList.js
-- import { CHANGE_INPUT_VALUE, ADD_TODO_ITEM, DELETE_TODO_ITEM} from './store/actionTypes'
++ import { getInputChangeAction, getAddItemAction, getDeleteItemAction } from './store/actionCreator'
handleInputChange(e){
const action = getInputChangeAction(e.target.value)
store.dispatch(action)
}
handleAddItem(){
const action = getAddItemAction()
store.dispatch(action)
}
handleItemDelete(index){
const action = getDeleteItemAction(index)
store.dispatch(action)
}
至此，我们的代码优化完成。项目目录结构如下图所示：
四、Redux设计和使用的三个原则
1、store是唯一的
2、只有store能够改变自己的内容
3、Reducer必须是纯函数
纯函数是指：给定固定的输入，就一定有固定的输出，且不会有任何副作用。
当函数中存在异步的ajax请求，或者异步的setTimeout的时候，或者存在时刻改变函数返回值的方法调用的情况，这个函数就不是纯函数。如下面代码：