智能小程序 Ray 开发面板 SDK —— 状态管理 SDK 汇总（二）

Redux

• src 业务源码目录
  • constant 业务项目常量目录
    • index.ts 常量定义文件
  • devices 智能设备模型目录
    • index.ts 定义并导出智能设备模型
    • schema.ts 当前智能设备 DP 功能点描述
  • pages 页面目录
    • home 首页
      • index.tsx 首页组件
  • redux Redux 目录
    • actions Redux Actions 目录
      • network.ts Network Actions
    • reducers Redux Reducers 目录
      • network.ts Network Reducers
    • index.ts Redux 入口
    • store.ts Redux Store 定义
  • app.tsx App 根组件

创建 Actions

// src/constant/index.ts
export const INIT_NETWORK = 'INIT_NETWORK';
export const CHANGE_NETWORK = 'CHANGE_NETWORK';

// src/redux/actions/network.ts
import { SmartDeviceModelNetwork } from '@ray-js/panel-sdk';
import { INIT_NETWORK, CHANGE_NETWORK } from '@/constant';
 
type UpdatePayload = Partial<SmartDeviceModelNetwork>;
 
const initNetwork = (payload: UpdatePayload) => {
  return {
    type: INIT_NETWORK,
    payload,
  };
};
 
const changeNetwork = (payload: UpdatePayload) => {
  return {
    type: CHANGE_NETWORK,
    payload,
  };
};
 
export const actions = {
  initNetwork,
  changeNetwork,
};

创建 Reducers

// src/redux/reducers/network.ts
import { SmartDeviceModel, SmartDeviceModelNetwork } from '@ray-js/panel-sdk';
import { INIT_NETWORK, CHANGE_NETWORK } from '@/constant';
import { devices } from '@/devices';
import { actions } from '../actions/network';
import { store } from '../store';
 
export type Actions = {
  [K in keyof typeof actions]: ReturnType<typeof actions[K]>;
};
 
SmartDeviceModel.onInitialized(() => {
  /**
   * 这里 setTimeout 是为了保证在 devices.xxx 挂载上去以后再去 dispatch
   */
  setTimeout(() => {
    store.dispatch(actions.initNetwork({ ...devices.robot.network }));
    devices.robot.onNetworkStatusChange((data) => {
      store.dispatch(actions.changeNetwork(data));
    });
  }, 0);
});
 
const network = (
  state = {} as Partial<SmartDeviceModelNetwork>,
  action: Actions['changeNetwork'],
) => {
  switch (action.type) {
    case INIT_NETWORK: {
      return {
        ...state,
        ...action.payload,
      };
    }
    case CHANGE_NETWORK: {
      return {
        ...state,
        ...action.payload,
      };
    }
    default:
      return state;
  }
};
 
export const reducers = {
  network,
};

定义 Store

// src/redux/store.ts
import { applyMiddleware, combineReducers, compose, createStore } from 'redux';
import { createLogger } from 'redux-logger';
import thunk from 'redux-thunk';
import { reducers as commonReducers } from './reducers/common';
import { reducers as networkReducers } from './reducers/network';
 
const reducers = {
  ...commonReducers,
  ...networkReducers,
};
 
type Reducers = typeof reducers;
 
export type ReduxState = { [K in keyof Reducers]: ReturnType<Reducers[K]> };
 
export const rootReducers = combineReducers(reducers);
 
const isDebuggingInChrome = !!window.navigator.userAgent;
const logger = createLogger({
  predicate: () => true,
  collapsed: true,
  duration: true,
});
 
const middleware = isDebuggingInChrome ? [thunk, logger] : [thunk];
 
function configureStore(initialState?: Partial<ReduxState>) {
  const appliedMiddleware = applyMiddleware(...middleware);
 
  const store = createStore(
    rootReducers,
    initialState,
    compose(appliedMiddleware),
  );
  return store;
}
 
export const store = configureStore();

使用 State

// src/pages/home/index.tsx
import React from 'react';
import { View } from '@ray-js/ray';
import { useSelector } from '@/redux';
 
export default function PageAppState() {
  const network = useSelector((state) => state.network);
  return (
    <View style={{ flex: 1 }}>
      {Object.keys(network || {}).map((key) => {
        return <View key={key}>{`network.${key}: ${network[key]}`}</View>;
      })}
    </View>
  );
}