Redux 教程：入门 Redux 的关键要素-JavaScript中文网-JavaScript教程资源分享门户

可能你会遇到过这样的情况，组件变得越来越复杂，层级嵌套越来越深，组件间的数据流也需要能够快速、简便地进行相应的增删改查。同时，全局共享的状态也需要在组件中进行反应。Redux 应运而生，它通过可预测的状态管理，为你的 React 应用提供了更好的数据流方案。

在开始入门 Redux 前，我们先来回顾一些基础知识：Redux 是什么？Redux 提供了什么？Redux 应该什么样的环境下使用？

Redux 是什么？

Redux 是一个状态管理库，它可以让我们更好地组织应用的状态，用于规划 React 应用的数据流。Redux 通过将应用的状态（也就是数据）与 UI 界面进行分离，从而确保了这些状态在不同组件之间的传递与同步，使得我们的应用变得更加可预测、可控。

Redux 提供了什么？

Redux 的核心就是 Store。Redux 应用中，Store 是维护应用全局状态的一块独立存储空间。但是，Store 状态是不可变的，只能通过纯函数的形式通过 Action 进行更新，保证了我们的应用状态更加可控。用一个简单的图来讲就是：

Redux 应该在什么样的环境下使用？

Redux 适用于大型应用，特别是当应用不断变得复杂时。无论你是在使用 React, Vue, Angular 或其他框架，Redux 都能够在你的应用中发挥作用。

好了，我们已经了解了 Redux 是什么以及它提供了什么，接下来，我们开始入门 Redux 的关键要素。

Redux 的三个关键要素

Redux 的三个核心要素是：Action、Reducer 和 Store。为了让你更好地理解它们，我们分别来介绍一下。

1. Action

Action 是一个纯 JavaScript 对象，用来描述发生的事件。它是可序列化的，也就是说可以被记录、传输、储存。每一个 Action 都包含了一个 type 属性，用于描述发生的事件类型。例如：

{
    type: 'INCREMENT' // Action 的类型，一般用大写英文字母
}

在实际开发过程中，我们还需要传递一些参数，如下所示：

{
    type: 'ADD_TODO',
    payload: {
        text: '学习 Redux',
        completed: false
    }
}

其中 payload 属性是我们需要传递的数据。我们通常会提取出 Action 的创建函数，这样便于我们在代码中的使用。例如：

// javascriptcn.com 代码示例
function addTodo (text) {
    return {
        type: 'ADD_TODO',
        payload: {
            text: text,
            completed: false
        }
    }
}

2. Reducer

Reducer 是纯函数，它在 Redux 中担任着处理状态的工作。Reducer 接收两个参数，第一个参数是当前的 state，第二个参数是描述要进行的修改的 Action，它会根据这个 Action 来返回一个新的 state。需要注意的是，Reducer 是一个纯函数，不改变原有的状态，而是返回一个新的状态。例如：

// javascriptcn.com 代码示例
function counter (state = 0, action) {
    switch (action.type) {
        case 'INCREMENT':
            return state + 1
        case 'DECREMENT':
            return state - 1 
        default:
            return state
    }
}

3. Store

Store 是将 Action 和 Reducer 连接的桥梁，它存储了应用的状态，并且提供了通用的 API。在 Redux 中只有一个 Store，通过 createStore() 方法创建。

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

const store = createStore(counter)

异步 Action 的使用

当我们的应用中需要进行异步操作时，我们需要使用 redux-thunk 中间件。

我们需要在 store 中应用这个中间件，然后创建一个可异步的 action，如下所示：

// javascriptcn.com 代码示例
import { createStore, applyMiddleware } from 'redux'
import thunkMiddleware from 'redux-thunk'
import reducer from './reducers'

const store = createStore(
  reducer,
  applyMiddleware(
    thunkMiddleware // 允许我们调用异步 Action
  )
)

// 异步 Action 的形式
export function fetchPosts (subreddit) {
  // 使用 dispatch 就可以通知 state 去更改 Action 了
  return dispatch => {
    dispatch(requestPosts(subreddit))
    return fetch(`https://www.reddit.com/r/${subreddit}.json`)
      .then(response => response.json())
      .then(json => dispatch(receivePosts(subreddit, json)))
  }
}

使用 React 和 Redux

使用 React 和 Redux，我们需要订阅状态的变化。在组件整个生命周期中，我们都需要订阅 Redux 的 store 状态的变化。

具体的实现如下所示：

// javascriptcn.com 代码示例
import React, { Component } from 'react'
import { connect } from 'react-redux'

class Counter extends Component {
  render () {
    const { value, dispatch } = this.props
    return (
      <div>
        <p>{value}</p>
        {/* 进行状态更改 */}
        <button onClick={() => dispatch({ type: 'INCREMENT' })}>+</button>
        <button onClick={() => dispatch({ type: 'DECREMENT' })}>-</button>
      </div>
    )
  }
}

function mapStateToProps (state) {
  return {
    value: state
  }
}

// 连接 React 组件和 Redux store 数据
export default connect(mapStateToProps)(Counter)

这样，我们就完成了 React 和 Redux 的连接。

总结

Redux 是一个状态管理的库，它将应用的状态与 UI 界面进行了分离，进行了更好的组织。Redux 的核心要素是：Action、Reducer 和 Store。使用 Redux 中间件的异步 Action 可以不阻塞应用线程。通过 react-redux 库，我们可以将 React 和 Redux 连接起来。

示例代码可以在 GitHub 上查看到。

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