我们一说到全局数据状态管理时，对于 Vue 框架，或许你想到的是 Vuex；对于 React 框架，或者你想到的是 Redux；在微信小程序中，globalData 内定义全局使用变量；而在 Taro 小程序中，使用 Redux 进行全局变量管理时，但是对于一些小型的应用，Redux 就可能显得比较重了。

使用对象做全局状态管理

其实就是跟本地 storage 设置缓存和获取缓存是一个道理。你可以定义一个对象来使用全局变量，代码如下：

const globalData = {};
export const setGlobalData = (key, val) => {
  globalData[key] = val;
}
export const getGlobalData = (key) => {
  return globalData[key];
}

使用如下：

import { getGlobalData, setGlobalData } from "../../utils/index";
setGlobalData('socket', this.socket)
getGlobalData('socket')

当然我们可以把 getGlobalData 和 setGlobalData 定义成一个函数，提供 get 和 set 两个API，代码如下：

export function createCache() {
  const globalData = {};
  return {
    set(key, val) {
      globalData[key] = val;
    },
    get(key) {
      return  globalData[key];
    }
  }
}

使用如下：

import { createCache } from "../../utils/index";

const c = createCache()
c.set('test', 100)
console.log(c.get('test'))

使用 redux 来做全局数据状态管理

1.定义 store

通过 redux 的 createStore 方法来生成 Store。createStore 方法的参数是 reducer 方法，即 rootReducer  中合并 reducer 。

import { createStore, applyMiddleware, compose } from "redux";
import thunkMiddleware from "redux-thunk";
import rootReducer from "./rootReducer";

const composeEnhancers =
  typeof window === "object" && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
    ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
        // Specify extension’s options like name, actionsBlacklist, actionsCreators, serialize...
      })
    : compose;
const middlewares = [thunkMiddleware];
const enhancer = composeEnhancers(
  applyMiddleware(...middlewares)
  // other store enhancers if any
);

export default function configStore() {
  const store = createStore(rootReducer, enhancer);
  return store;
}

2. action 里面定义事件

action 是一个数据的载体。通过 dispatch 分派 action 来修改 state（即 reducer 中修改），不能直接修改 Store 里面的 state。 

action 的本质是描述已发生的事件。告知 reducer 该更新 store 里的那些 state，即定义 type 值，在 reducer 里通过收到的 action 的不同 type 值，去执行不同的修改 state 行为，因此 type 属性通常会被定义成常量字符串。payload 属性中，可以传递一些数据给 reducer 中。

import { getQuotedList } from "../../servers/servers";
import { INQUIRYSHEETSERVICE } from "./action-type";

export const getStoreQuotedList = (params, isLoading) => async (dispatch) => {
  const { data } = await getQuotedList(params, isLoading);
  dispatch({ type: INQUIRYSHEETSERVICE, payload: { data, params } });
};

3. reducer 中处理事件

在 reducer 里更新 store 里面的 state。我们可以看的 reducer 接收两个参数：旧的 state 和 action，返回一个新的 state。这里有两个注意点：一个是首次执行 redux 时，需要给 state 一个初始值，即定义的 ENQUIRY_STATE 常量。二个是 reducer 每次更新状态时，返回的是一个新的 state（将旧的 state 参数复制一份，在复制的参数中修改，将复制的返回），而不是直接对旧的 state 参数进行修改。

import { INQUIRYSHEETSERVICE } from "./action-type";

const ENQUIRY_STATE = {
  enquiryList: {},
  ......
}
export default function counter(state = ENQUIRY_STATE, action) {
  switch (action.type) {
    case INQUIRYSHEETSERVICE:
      return {
        ...state,
        enquiryList: action.payload.data,
      };
  }
}

4.将 state 存储到 store

用 combineReducers 方法将多个 reducer 合并起来，将业务数据拆分的更清晰。

import { combineReducers } from "redux";
import enquiry from "./enquiry/reducer";

export default combineReducers({
  enquiry
});

5.获取 store 里面的 state

connect 之前定义的state：

import { connect } from 'redux'
import { getStoreQuotedList } from "../../store/enquiry/action";

@connect(
  ({ enquiry }) =({
    enquiry,
  })
  (dispatch) => ({
    getStoreQuotedList(param, isLoading) {
      dispatch(getStoreQuotedList(param, isLoading));
    },
  })
)

componentDidShow () {
  console.log(this.props.enquiry) // state 中的数据
  this.props.getStoreQuotedList(param, isLoading) // state 中的 action 事件
}