Redux 基本概念

Redux 官网: https://cn.redux.js.org/

一、三大核心概念

1、Store

• Store 可理解为仓库、水池，用于存放数据的容器，一个应用通常只有一个 Store。

  • React / JavaScript 创建 Store:

    import { createStore } from 'redux';
    
    const store = createStore(reducers);

  • Flutter / Dart 创建 Store。

    import 'package:redux/redux.dart';
            
    final store = Store<AppState>(reducers);

• 注意：不管是 React 还是 Flutter 中，创建 Store 时必须要传入一个函数作为参数，该函数为 Reducer，后边会讲到。

2、Action

• Action 在这里作名词，可理解为（向 Store 水池中打水漂的）石块。

  • React / JavaScript 中的 action 为一个 JSON 对象，该对象必须要有一个 type 属性，其他属性没有限制。

    const add = {
      type: 'ADD',
      val: 5
    };
    const dec = {
      type: 'DEC',
      val: 1,
    }

  • Flutter / Dart 中的 action 和 JavaScript 的用类似，但 type 属性不再是必须的了，这里直接使用简单的枚举来标识不同的 action。

    enum Actions {
      ADD, DEC,  
    }

3、Reducer

• Reducer 为不包含任何逻辑的纯函数。在向水池打水漂的例子中，水池随着石块的变化而变化遵循着某种函数规律，这个函数即为 Reducer。

• Reducer 作为一个函数，接收一个状态 State 和事件 Action，得到新的状态 NewState。

  • React / JavaScript 中的 reducer 。

  const reducer = (state, action) => newState;
  
  // 以下为一个例子
  const counterReducer = (state = 0, action) => {
      switch (action.type) {
          case 'ADD':
              return state + action.val;
          case 'DEC':
              return state - action.val;
          default:
              return state;
      }
  }

  • Flutter / Dart 中的 reducer 。

  enum Actions {
      ADD, DEC,
  }
  
  int counterReducer(int state, action) {
      switch (action) {
          case Actions.ADD:
              return state + 1;
          case Actions.DEC:
              return state - 1;
          default:
              return state;
      }
  }

二、几个重要方法

1、Store 的常用方法

• Store.getState()

  • 该方法返回一个 State，在 Redux 中每一个 State 对应着的一种不同的 UI 状态。

  • React / JavaScript 中获取 state :

  const state = store.getState();

  • Flutter / Dart 中获取 state :

  final state = store.state;

• Store.dispatch(action)

  • 可以理解为向水池 Store 中扔一个石块 Action。在该方法内部，Store 会根据 Reducer 函数生成一个新的 State，从而引起 UI 的变化。

  • React / JavaScript 中的调用 :

  store.dispatch({
      type: 'ADD',
      val: 5
  });

  • Flutter / Dart 中的调用 :

  store.dispatch(Actions.ADD);

• Store.subscribe(listener)

  • 向 Store 注册监听，如果 Store 有变化，则为回调 listener。

  • React / JavaScript 中的调用 :

  store.subscribe(() => console.log("状态变化：" + store.getState()));

  • Flutter / Dart 中的调用 :

  store.onChange.listen(render)

2、其他常用方法

• combineReducers

  • 当业务复杂的时候，Reducer 函数肯定会需要拆分。当我们需要把多个 Reducer 函数进行联合的时候，就需要使用 combineReducers 了。

  • React / JavaScript 中的调用 :

  const appReducer = combineReducers({
      aReducer,
      bReducer,
  })

  • Flutter / Dart 中的调用 :

  final appReducer = combineReducers(
    aReducer,
    bReducer,
  )

• ActionCreator

  • 为了方便创建 Action，可以统一的一个函数来创建 Action。由于 Flutter 中的 Action 较为简单，不需要通过函数来创建 Action，下面仅展示 React 中的用法。

  const addCteator = (value) => {
      return {
          type: 'ADD',
          val: value,
      }
    };