解析 Redux 的使用和中间件-JavaScript中文网-JavaScript教程资源分享门户

Redux已成为前端开发中非常流行的状态管理库，它是一个专门用于JavaScript应用程序的可预测状态容器，能够让你方便地管理你的整个应用的状态。Redux采用单向数据流的方式，将一个应用中所有的状态保存在一个状态树中，每个状态变化都会生成一个新的状态树。同时，它也提供了丰富的中间件机制，可以轻松地进行异步操作、日志记录、错误处理等各种应用程序的增强。

Redux的核心概念和API

Redux的核心概念比较简单，主要包括3个部分：store、reducer和action。其中store是整个应用程序的唯一数据源，存储了整个应用的状态树；reducer是一个纯函数，接收当前状态和一个操作，返回一个全新的状态；而action则是一个普通的JavaScript对象，用于描述用户所进行的操作。Redux的工作流程主要是通过dispatch函数将action作为参数传递给reducer，reducer根据action的类型更新状态，并返回新的状态，从而更新整个应用程序的视图。Redux提供了较为简单的API，主要包括：createStore、combineReducers、applyMiddleware、 bindActionCreators、compose等。

Redux中间件机制

Redux的中间件机制可以理解成是对dispatch函数的封装，可以对action的流程进行拦截、修改或者增强。Redux中间件主要包括两个部分——中间件函数和中间件链（Middleware chain）。中间件函数是对dispatch函数的增强，它接收action作为参数并返回一个新的action对象，同时可以进行异步操作、修改数据、记录日志、错误处理等各种操作。而中间件链则包括多个中间件函数，这些函数会依次执行，形成一个洋葱模型。

Redux中的中间件机制非常灵活，可以轻松达到任何想要的效果。比如可以通过应用一个异步中间件来处理异步操作：

import {createStore, applyMiddleware} from 'redux'
import thunk from 'redux-thunk'
import {composeWithDevTools} from 'redux-devtools-extension'
import rootReducer from './reducers'

const middleware = [thunk]

const store = createStore(
  rootReducer,
  composeWithDevTools(
    applyMiddleware(...middleware)
  )
)

export default store

上述代码中，借助redux-thunk中间件，我们可以在action中进行异步操作，如下：

export const fetchPosts = () => dispatch => {
  dispatch({type: FETCH_POSTS_REQUEST})
  fetch('https://jsonplaceholder.typicode.com/posts')
    .then(res => res.json())
    .then(posts =>
      dispatch({
        type: FETCH_POSTS_SUCCESS,
        payload: posts
      })
    )
    .catch(err =>
      dispatch({
        type: FETCH_POSTS_FAILURE,
        payload: err.message
      })
    )
}

Redux的实践案例

接下来，我们将借助一个简单的Counter应用程序介绍Redux的实践案例。这个应用程序包含两个按钮，可以实现数字的加减。

首先是actions.js文件中定义的action：

export const increase = () => ({
  type: 'INCREASE'
})

export const decrease = () => ({
  type: 'DECREASE'
})

然后是reducer.js文件中定义的reducer：

const initialState = { count: 0 }

const counterReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'INCREASE':
      return { count: state.count + 1 }
    case 'DECREASE':
      return { count: state.count - 1 }
    default:
      return state
  }
}

export default counterReducer

紧接着是store.js文件中定义的store：

import { createStore } from 'redux'
import counterReducer from './reducer'

const store = createStore(
  counterReducer,
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
)

export default store

最后是App.js中的实现：

import React from 'react'
import { connect } from 'react-redux'
import { increase, decrease } from './actions'

const App = ({ count, increase, decrease }) => (
  <div>
    <h2>Count: {count}</h2>
    <button onClick={decrease}>-</button>
    <button onClick={increase}>+</button>
  </div>
)

const mapStateToProps = state => ({
  count: state.count
})

export default connect(mapStateToProps, { increase, decrease })(App)

这个简单的Counter应用程序中展示了Redux的主要信息流（actions、reducer、store）以及React与Redux的连接。乍一看，这个应用程序可能比较琐碎，但实际上它非常直白、干净的展示了Redux的主要精髓。

总结

本文对Redux的原理、应用场景、API及中间件机制进行了介绍，并借助一个简单的Counter应用程序进行了演示。当然，Redux的使用远不止于此，它还有很多其他的细节和特殊情况需要处理。但相信通过本文的介绍，您已经可以基本了解Redux的核心概念和实践方法，也可以在实际项目中灵活应用，为自己的应用程序引入更多的增强特性。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65a377f6add4f0e0ffb9e1ce

解析 Redux 的使用和中间件

Redux的核心概念和API

Redux中间件机制

Redux的实践案例

总结

纠错反馈