珠峰培训，专注前端

一、常用的 redux 中间件

  • 我们以 Counter 为例；组件代码如下：
  1. import React, { Component } from 'react'
  3. import actions from '../store2/action'
  4. import { connect } from 'react-redux'
  6. class Counter extends Component {
  7.   render () {
  8.     return (<div className="container">
  9.         <button onClick={() => this.props.add(1)}>+</button>
  10.         <span>{this.props.num}</span>
  11.         <button onClick={() => this.props.minus(1)}>-</button>
  12.     </div>)
  13.   }
  14. }
  16. export default connect(state => ({...state}), actions)(Counter)

1.1 redux-logger

当 store 中的状态发生变化时，redux-logger 会把改变之前的状态和改变之后的状态输出到控制台；

1.1.1 安装 redux-logger

所有的中间件在使用前都需要安装；

  1. yarn add redux-logger --save

1.1.2 使用中间件

使用中间件，需要借助 redux 中的另一个方法 applyMiddleware，从 redux 中导出它，同时导入中间件

  1. import { createStore, applyMiddleware } from 'redux'
  2. import reduxLogger from 'redux-logger'

然后，在调用 createStore 时传入第二个参数：applyMiddleware(中间件名字)

示例：

  1. import { createStore, applyMiddleware } from 'redux'
  2. import reducer from './reducer'
  4. import reduxLogger from 'redux-logger'
  6. export default createStore(reducer, applyMiddleware(reduxLogger))

接着，在控制台修改状态试试看，控制台会输出修改前的状态和修改后的状态；

1.2 redux-thunk

  • 需求，点击 Counter 的加，2s 后再执行加的操作

我们有时候需要一些异步的操作，例如定时器、ajax 等，这些异步的操作无法直接在 actionCreator 中进行，但是这个 redux-thunk 函数，可以让我们的 actionCreator 返回一个 function ，这个函数的参数是 dispatch 和 getState就是 store.dispatch、store.getState；
它把 dispatch 的控制权交给了我们 actionCreator 返回的函数，在这个函数中，我们可以在任意位置 dispatch，例如定时器中；

1.2.1 安装 redux-thunk

  1. yarn add redux-thunk --save

1.2.2 导入，并且作为第二个参数传入 createStore 时的 applyMiddleware

  1. import { createStore, applyMiddleware } from 'redux'
  2. import reducer from './reducer'
  4. import reduxLogger from 'redux-logger'
  5. import reduxThunk from 'redux-thunk'
  7. export default createStore(reducer, applyMiddleware(reduxLogger, reduxThunk))

1.2.3 修改后的 actionCreator 函数

  1. import * as Types from '../action-types'
  3. export default {
  4.     add (amount) {
  5.         return (dispatch, getState) => {
  6.             // 返回一个 函数，在我们可以在任意位置 dispatch action，异步的也可以
  7.             setTimeout(() => {
  8.                 dispatch({
  9.                     type: Types.ADD,
  10.                     amount
  11.                 })
  12.             }, 2000)
  13.         }
  14.      },
  15.     minus (amount) {
  16.         return {
  17.             type: Types.MINUS,
  18.             amount
  19.         }
  20.     }
  21. }

1.3 redux-promise

我们在日常开发中，尤其是处理异步的数据时，常用到 Promise；对此 redux-promise 中间件专门用来处理 redux 中的 Promise；

1.3.1 安装 redux-promise

  1. yarn add redux-promise --save

1.3.2 导入并使用

  1. import { createStore, applyMiddleware } from 'redux'
  2. import reducer from './reducer'
  4. import reduxLogger from 'redux-logger'
  5. import reduxThunk from 'redux-thunk'
  6. import reduxPromise from 'redux-promise'
  8. export default createStore(reducer, applyMiddleware(reduxLogger, reduxThunk, reduxPromise))

1.3.3 使用 redux-promise 后，在 actionCreator 中有两种用法：

  1. 直接在某个 actionCreator 中返回一个 Promise 实例，但是这种用法，只能处理 resolve，并在 resolve 时传入一个 action 对象；如果 reject 直接抛出错误
  • 示例：
  1. import * as Types from '../action-types'
  3. export default {
  4.     add (amount) {
  5.         return (dispatch, getState) => {
  6.             setTimeout(() => {
  7.                 dispatch({
  8.                     type: Types.ADD,
  9.                     amount
  10.                 })
  11.             }, 2000)
  12.         }
  13.      },
  14.     minus (amount) {
  15.         return new Promise((resolve, reject) => {
  16.             setTimeout(() => {
  17.                 resolve({
  18.                     type: Types.MINUS,
  19.                     amount
  20.                 })
  21.             }, 2000)
  22.         })
  23.     }
  24. }
  1. 如果失败成功都要处理，我们不能直接在 actionCreator 函数中返回 Promise 实例，而是在返回的 action 对象中增加 payload 属性，payload 的属性值是一个 Promise，如果 Promise resolve 那么 payload 代表的就是 resolve 时传入的值，如果 reject 时，payload 代表的就是 reject 时传入的值，同时 reducer 函数也需要修改；

示例：

  • action/index.js 【actionCreator】
  1. import * as Types from '../action-types'
  3. export default {
  4.     add (amount) {
  5.         return (dispatch, getState) => {
  6.             setTimeout(() => {
  7.                 dispatch({
  8.                     type: Types.ADD,
  9.                     amount
  10.                 })
  11.             }, 2000)
  12.         }
  13.      },
  14.     minus (amount) {
  15.         return {
  16.             type: Types.MINUS,
  17.             payload: new Promise((resolve, reject) => {
  18.                 // resolve(1)
  19.                 reject(10)
  20.             })
  21.         }
  22.     }
  23. }
  • reducer/index.js
  1. import * as Types from '../action-types'
  3. export default function (state = {num: 0}, action) {
  4.     switch (action.type) {
  5.         case Types.ADD:
  6.             return {
  7.                 num: state.num + action.amount
  8.             }
  9.         case Types.MINUS:
  10.             return {
  11.                 num: state.num - action.payload // actionCreator 函数使用 Promise 对应修改为减去 action.payload
  12.             }
  13.     }
  15.     return state
  16. }

二、TodoList 案例

效果如图：

2.1 项目结构如下

  1. -src
  2. │  index.css
  3. │  index.js
  4. │
  5. ├─components
  6. │      App.js
  7. │      TodoFooter.js
  8. │      TodoHeader.js
  9. │      TodoItem.js
  10. │      TodoList.js
  11. │
  12. ├─store
  13.   │  action-types.js
  14.   │  index.js
  15.   │
  16.   ├─action
  17.   │      index.js
  18.   │
  19.   └─reducer
  20.          index.js

2.2 代码如下：

2.2.1 src/index.js

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import './index.css';
  4. import { Provider } from 'react-redux'
  6. import App from './components/App';
  9. import store from './store'
  11. ReactDOM.render(<Provider store={store}>
  12.     <App />
  13. </Provider>, document.getElementById('root'));

2.2.2 sr/store/index.js

  1. import { createStore } from 'redux'
  3. import reducer from './reducer'
  5. export default createStore(reducer)

2.2.3 src/store/action-types.js

  1. export const ADD_TODO = 'ADD_TODO'
  3. export const CHANGE_SELECTED = 'CHANGE_SELECTED'
  5. export const DELETE_TODO = 'DELETE_TODO'
  7. export const CHANGE_CURRENT_TYPE = 'CHANGE_CURRENT_TYPE'

2.2.4 src/store/action/index.js 【actionCreator】

  1. import * as Types from '../action-types'
  3. // 在组件中使用 connect 的时候我们需要传递一个 actionCreator 对象，所以这里我们直接导出一个 actionCreator 对象
  4. export default {
  5.     addTodo (todo) { // 添加 todo 内容
  6.         return {
  7.             type: Types.ADD_TODO,
  8.             todo
  9.         }
  10.     },
  11.     changeSelected (id) {
  12.         return {
  13.             type: Types.CHANGE_SELECTED,
  14.             id
  15.         }
  16.     },
  17.     deleteTodo (id) {
  18.         return {
  19.             type: Types.DELETE_TODO,
  20.             id
  21.         }
  22.     },
  23.     changeType (curType) {
  24.         return {
  25.             type: Types.CHANGE_CURRENT_TYPE,
  26.             curType
  27.         }
  28.     }
  29. }

2.2.5 src/store/reducer/index.js

  1. import * as Types from '../action-types'
  3. let initState = {
  4.     type: 'all',
  5.     todos: [
  6.         {
  7.             isSelected: false,
  8.             title: '今天吃药了吗',
  9.             id: 1
  10.         },
  11.         {
  12.             isSelected: true,
  13.             title: '今天吃饭了吗',
  14.             id: 2
  15.         }
  16.     ]
  17. }
  19. export default function todo(state= initState, action) {
  20.     switch (action.type) {
  21.         case Types.ADD_TODO:
  22.             return {
  23.                 ...state,
  24.                 todos: [
  25.                     ...state.todos,
  26.                     action.todo
  27.                 ]
  28.             }
  29.         case Types.CHANGE_SELECTED:
  30.             return {
  31.                 ...state,
  32.                 todos: state.todos.map(item => {
  33.                     if (item.id === action.id) {
  34.                         item.isSelected = !item.isSelected
  35.                         return item
  36.                     }
  38.                     return item
  39.                 })
  40.             }
  41.         case Types.DELETE_TODO:
  42.             return {
  43.                 ...state,
  44.                 todos: state.todos.filter(item => item.id !== action.id)
  45.             }
  46.         case Types.CHANGE_CURRENT_TYPE:
  47.             return {
  48.                 ...state,
  49.                 type: action.curType
  50.             }
  51.     }
  53.     // 写 reducer 第一件事返回默认状态
  54.     return state
  55. }

2.2.5 src/components/App.js

  1. import React, { Component } from 'react'
  3. import TodoHeader from './TodoHeader'
  4. import TodoFooter from './TodoFooter'
  5. import TodoList from './TodoList'
  6. import 'bootstrap/dist/css/bootstrap.min.css'
  8. export default class App extends Component {
  9.   render () {
  10.     return (<div className="container">
  11.         <div className="col-md-6 col-md-offset-3">
  12.             <div className="panel panel-danger">
  13.                 <div className="panel-heading">
  14.                     <TodoHeader />
  15.                 </div>
  16.                 <div className="panel-body">
  17.                     <TodoList />
  18.                 </div>
  19.                 <div className="panel-footer">
  20.                     <TodoFooter />
  21.                 </div>
  22.             </div>
  23.         </div>
  24.     </div>)
  25.   }
  26. }

2.2.5 src/components/TodoHeader.js

  1. import React, {Component} from 'react'
  3. import {connect} from 'react-redux'
  5. import actions from '../store/action'
  7. class TodoHeader extends Component {
  8.     getUnfinishedCount = () => this.props.todos.filter(i => !i.isSelected).length
  10.     render () {
  11.         return (<div>
  12.             <h3>亲，你有 {this.getUnfinishedCount()} 件事没有完成</h3>
  13.             <input type="text" className="form-control" onKeyDown={(e) => {
  14.                 if (e.keyCode === 13) {
  15.                     this.props.addTodo({
  16.                         id: this.props.todos[this.props.todos.length - 1].id + 1,
  17.                         title: e.target.value,
  18.                         isSelected: false
  19.                     })
  20.                     e.target.value = ''
  21.                 }
  22.             }}/>
  23.         </div>)
  24.     }
  25. }
  27. export default connect(state => ({...state}), actions)(TodoHeader)

2.2.7 src/components/TodoList.js

  1. import React, {Component} from 'react'
  3. import actions from '../store/action'
  5. import TodoItem from './TodoItem'
  7. import { connect } from 'react-redux'
  9. class TodoList extends Component {
  10.     filterData = () => {
  11.         switch (this.props.type) {
  12.             case 'all':
  13.                 return this.props.todos
  14.             case 'unfinished':
  15.                 return this.props.todos.filter(i => !i.isSelected)
  16.             case 'finished':
  17.                 return this.props.todos.filter(i => i.isSelected)
  18.         }
  19.     }
  20.     render() {
  21.         return (<ul className="list-group">
  22.             {
  23.                 this.filterData().map((item, index) => {
  24.                     return <TodoItem item={item}
  25.                                      key={index}
  26.                                      changeSelected={this.props.changeSelected}
  27.                                      deleteTodo={this.props.deleteTodo} />
  28.                 })
  29.             }
  30.         </ul>)
  31.     }
  32. }
  34. export default connect(state => ({...state}), actions)(TodoList)

2.2.8 src/components/TodoItem.js

  1. import React, { Component } from 'react'
  3. export default class TodoItem extends Component {
  4.   render () {
  5.     let { item, changeSelected, deleteTodo } = this.props
  6.     return (<li className="list-group-item">
  7.         <input type="checkbox"
  8.              checked={item.isSelected}
  9.              onChange={() => changeSelected(item.id)} />
  10.         {item.title}
  11.         <button className="btn btn-xs pull-right" onClick={() => deleteTodo(item.id)}>&times;</button>
  12.     </li>)
  13.   }
  14. }

2.2.9 src/components/TodoFooter.js

  1. import React, { Component } from 'react'
  4. import actions from '../store/action'
  6. import { connect } from 'react-redux'
  9. class TodoFooter extends Component {
  10.   render () {
  11.     let type = this.props.type
  12.     return (<div>
  13.       <nav className="nav nav-pills" onClick={(e) => {
  14.         // h5 新增的属性，元素对象有一个 dataset 属性，值是对象，其中包含了以 data- 开头的行内属性及对应的值；注意取值时不带 data-
  15.         this.props.changeType(e.target.dataset.type)
  16.       }}>
  17.         <li className={type === 'all' ? 'active' : ''}><a data-type="all">全部</a></li>
  18.         <li className={type === 'unfinished' ? 'active' : ''}><a data-type="unfinished">未完成</a></li>
  19.         <li className={type === 'finished' ? 'active' : ''}><a data-type="finished">已完成</a></li>
  20.       </nav>
  21.     </div>)
  22.   }
  23. }
  25. export default connect(state => ({...state}), actions)(TodoFooter)

【发上等愿，结中等缘，享下等福，择高处立，寻平处住，向宽处行】