Redux 教程：在实时 Web 应用程序中实现 Redux 的实时功能-JavaScript中文网-JavaScript教程资源分享门户

前言

随着 Web 应用程序的不断发展，对于实时性越来越高的需求也逐渐增加。为了能够更好地实现实时功能，Redux 应运而生。Redux 是一个状态容器，帮助开发者管理应用程序状态，并提供了很多可靠的工具来管理数据流并确保应用程序的一致性。本文将带您深入了解 Redux 在实时 Web 应用程序中的实际应用。

Redux 简介

Redux 作为一个状态容器库，提供了单一的数据源来管理应用程序状态。Redux 的核心思想包括以下三个方面：

单一数据源：整个应用程序的状态被储存在单个对象树中，这个对象树被称作 store 。
状态只读：唯一改变状态的方式是发起一个 action（一个用于描述已发生事件的普通对象）。
使用纯函数来执行修改：为了描述 action 如何去修改 state 树，你需要编写 reducers。

Redux 的三大原则：

单一数据源：整个应用程序的状态被储存在单个对象树中。
可以被整个应用共同访问：使用 react-redux 库的时候，可以轻松获取 store 状态。
State 是只读的：那么你就需要使用 action 来发起 state 变更请求。

Redux 使用步骤

Redux 在使用上并不难，以下是使用 Redux 的基本步骤：

定义 action
定义 reducer
初始化 store
绑定 react 和 redux
dispatch action

我们来详细说明一下每个步骤。

定义 action

一个 action 是一个简单的 JavaScript 对象。它必须有一个 type 字段，用于指定它是一个 action 以及具体的执行类型。

示例代码如下：

const ADD_TODO = 'ADD_TODO'

{
  type: ADD_TODO,
  text: 'Build my first Redux app'
}

定义 reducer

一个 reducer 是一个纯函数，它用于处理不同的类型的 action 和更新应用程序状态消息。它通过接收前一个状态（previous state）和 action 对象，生成新的状态。请务必保证它是一个纯函数，因为它是我们应用程序中单项数据流的核心。

示例代码如下：

// javascriptcn.com 代码示例
function todoReducer(state = [], action) {
  switch (action.type) {
    case ADD_TODO:
      return [
        ...state,
        {
          text: action.text,
          completed: false
        }
      ]
    default:
      return state
  }
}

初始化 store

一个 store 是应用程序状态的单一容器。根据传入的 reducer 创建一个 store 。createStore 方法用于创建 Redux store 。一般而言，你需要传递三个参数：reducer（必须）、initialState（可选）和middleware(可选)。

示例代码如下：

import { createStore } from 'redux'
import todoReducer from './reducers/todoReducer'

const store = createStore(todoReducer)

绑定 react 和 redux

当 store 发生变化的时候，需要通知 react 更新。为了这个，我们需要在 react 组件中注入 store 。为了简化这个任务，react-redux 库提供了两个很好的工具 connect 和 Provider 。connect 是一个 HOC 高阶函数，它用于连接 react 组件和 Redux store 。Provider 是一个顶级组件，它用于将 store 引入 React 应用程序，使得 connect 变得可行。

示例代码如下：

// javascriptcn.com 代码示例
import { Provider } from 'react-redux'
import store from './store'
import App from './App'

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)

dispatch action

绑定完成后，我们可以使用 store.dispatch() 方法来触发 action 事件。这将通知 reducer 来更新我们的应用程序状态。

示例代码如下：

store.dispatch({
  type: ADD_TODO,
  text: 'Build my first Redux app'
})

Redux 在实时应用程序中的应用

在实时应用程序中，我们需要实时更新应用程序状态。然而，Redux 并没有为我们提供实时更新状态的能力。我们需要自己来实现。

我们可以使用 Redux-Middleware 的 store enhancer 来处理实时状态更新。Redux-Middleware 提供了多个 store enhancer，其中包括 thunk 和 saga 。thunk 在了解 redux 之前或状态更新比较简单的情况下，是个不错的选择。 saga 面向更复杂的情况，提供任务启动和取消能力。

在这里，我们介绍使用 thunk 实现实时更新状态的功能。

使用 thunk 实现实时更新

thunk 允许 action 创建函数返回函数而不是对象。这个函数的作用是处理异步操作，并在完成后向 reducer 发起 dispatch。因此，我们可以在异步操作期间发起 dispatch，我们可以轻松地将 Redux 集成到任何需要实时状态更新的异步应用程序中。

使用 thunk 具体步骤如下：

（1）引入redux-thunk

redux-thunk可用于异步操作、延迟 dispatch 执行，甚至是以异步的形式来 dispatch。

示例代码如下：

import thunk from 'redux-thunk'
import { createStore, applyMiddleware } from 'redux'
import todoReducer from './reducers/todoReducer'

const store = createStore(
  todoReducer,
  applyMiddleware(thunk)
)

（2）定义异步 action creator 函数

export function fetchData() {
  return function(dispatch) {
    return fetchSomeData().then(
      data => dispatch(receiveData(data)),
      error => console.log(error)
    );
  };
}

在上面代码中，fetchData()返回生成的函数。在此函数中，您可以执行任何异步操作。在这个例子中，我们使用了 fetchSomeData() 函数，该函数返回一个 promise 结果。在完成后，我们向 reducer 发起一个接收数据的 dispatch。

（3）调用异步 action creator

在您需要调用异步 action creator 的地方调用它，例如：

store.dispatch(fetchData())

调用后该函数将会被thunk中间件捕获到，并进行处理。

总结

本文详细介绍了如何在实时 Web 应用程序中使用 Redux 。Redux 可以帮助开发者管理应用程序状态，并且提供了很多可靠的工具来管理数据流并确保应用程序的一致性。我们可以通过引入 Redux-Middleware 实现实时状态更新的功能。特别是，我们介绍了如何使用 thunk 实现实时状态更新。

通过这篇文章，您应该对如何使用 Redux 在实时 Web 应用程序中管理状态有了更深入的了解。我们希望您可以更加自如地使用 Redux 帮助您构建更加健壮的应用程序。

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