深入浅出 Redux 及其应用

前言

Redux 是前端开发中广泛使用的一种状态管理工具，它提供了一种可预测的方式来管理应用程序的状态。本文将深入探讨 Redux 的概念、基本原则、使用方法及其应用。

Redux 概念

Redux 通过单一状态树(store)来管理整个应用的状态，使得整个应用程序状态可预测。一般情况下，我们会创建一个 store 来存储应用的状态，然后通过 action 来传递操作记录， reducer 对应修改状态：

Store 存储了应用的所有 state，而 reducer 则是一个函数，接受一个 state 和一个 action，返回新的 state。

Redux 基本原则

Redux 是一个“单向数据流”的框架，其原则主要包括如下几点：

1. 单一数据源，整个应用状态存储于单一对象中。
2. 状态是只读的，仅能通过 action 发起操作更新。
3. 通过纯函数来修改 state。

代码如下：

// www.javascriptcn.com code example
(state = defaultState, action) => {        // reducer 接受 state 和 action 两个参数
  switch (action.type) {                   // action.type 是必须的
    case INCREMENT:                        // 处理对应的 action 类型
      return Object.assign({}, state, {
        count: state.count + 1
      });
    case DECREMENT:
      return Object.assign({}, state, {
        count: state.count - 1
      });
    default:                               // 默认返回原有 state
      return state;
  }
}

Redux 应用

React-redux 与 Redux-thunk

基于 React 的开发通常会使用 react-redux 作为 Redux 应用的视图层框架的解决方案，同时也有 redux-thunk 作为 redux 中间件来处理异步 action 请求。

react-redux 就是 Redux 和 React 结合的中间件，它将 Redux 的 state 通过 context 的方式传递给下层组件，并通过 connect 将 UI 组件和 redux 逻辑代码分离开来。

Redux-thunk 是一个简单的中间件，它允许 action 通过返回函数而不是对象来引入异步操作。如果在创建 store 时应用了 redux-thunk 中间件，那么这个返回函数将被 Redux 中间件运行，并将 dispatch 函数和 getState 函数作为参数传递给返回函数。

示例代码

// www.javascriptcn.com code example
import React, { Component } from 'react';
import { connect } from 'react-redux';

class Counter extends Component {
  render() {
    const { count, increment, decrement } = this.props;
    return (
      <div>
        <h1>{count}</h1>
        <button onClick={increment}>+</button>
        <button onClick={decrement}>-</button>
      </div>
    );
  }
}

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

const mapDispatchToProps = (dispatch) => {
  return {
    increment: () => dispatch({ type: 'INCREMENT' }),
    decrement: () => dispatch({ type: 'DECREMENT' })
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(Counter);

• Counter 是一个 React 组件，用于展示一个计数器，同时定义了 increment 和 decrement 两个按钮来对计数器进行加减操作。
• mapStateToProps 是一个用于连接 Redux store 的函数，将 store 的 state 映射到组件中的 props，因此在这个函数中返回的 count 就可以通过 props 使用了。
• mapDispatchToProps 也是一个连接函数。它将 Redux 的 dispatch 方法映射到组件的 props 中，这样就可以在组件中直接使用 increment 和 decrement 这两个返回 dispatch 的函数了。

结语

Redux 是一个强大的状态管理工具，应用广泛。本文针对 Redux 概念、原则、使用以及应用做了详细讲解，大家在项目中可以有一个更多的参照，也为新手提供了有价值的参考。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d6604ca941bf7134c1b84d