业务篇-如何写我们的Redux与File #

// renderer/store/index.ts
import logger from 'redux-logger';
import RcReduxModel from 'rc-redux-model';
import { createStore, applyMiddleware, combineReducers } from 'redux';

// 👇 引入我们写好的 model
import globalModel from './globalModel';

// 👇 这里只需要调用 RcReduxModel 实例化一下得到最后的 reduxModel
const reduxModel = new RcReduxModel([globalModel]);

// 👇 无侵入式的使用 Redux，即使你写最原始的 reducer 也照样支持
const reducerList = combineReducers(reduxModel.reducers);

export default createStore(reducerList, applyMiddleware(reduxModel.thunk, logger));

// renderer/store/globalModel.ts
const globalModel = {
  namespace: 'globalModel',
  openSeamlessImmutable: true,
  state: {
    appName: '简历应用平台',
  },
};

export default globalModel;

import React from 'react';
import ReactDOM from 'react-dom';
import Router from './router';

// 👇 引入 store
import store from './store';

// 引入 Provider
import { Provider } from 'react-redux';

function App() {
  return (
    <Provider store={store}>
      <Router />
    </Provider>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

// renderer/container/root/index.tsx
import { useSelector } from 'react-redux';

function Root() {
  const appName = useSelector((state: any) => state.globalModel.appName);
  console.log('appName = ', appName);
}

// renderer/container/root/index.tsx
import { useSelector, useDispatch } from 'react-redux';

function Root() {
  const dispatch = useDispatch();
  const appName = useSelector((state: any) => state.globalModel.appName);

  useEffect(() => {
    setTimeout(() => {
      console.log('3s 后修改...');
      dispatch({
        type: 'globalModel/setStore',
        payload: {
          key: 'appName',
          values: 'visResumeMook',
        },
      });
    }, 3000);
  }, []);

  useEffect(() => {
    console.log('appName = ', appName);
  }, [appName]);
}

// renderer/common/utils/file.ts
import fs, { promises as fsPromiseAPIs } from 'fs';

const fileAction = {
  read: (path: string, encoding: BufferEncoding): Promise<string> => {
    return fsPromiseAPIs.readFile(path, { encoding: encoding || 'utf8' });
  },
  write: (path: string, content: string, encoding: BufferEncoding): Promise<void> => {
    return fsPromiseAPIs.writeFile(path, content, { encoding: encoding || 'utf8' });
  },
  rename: (oldPath: string, newPath: string) => {
    return fsPromiseAPIs.rename(oldPath, newPath);
  },
  delete: (path: string) => {
    return fsPromiseAPIs.unlink(path);
  },
  hasFile: (path: string) => {
    return fsPromiseAPIs.access(path, fs.constants.F_OK);
  },
  canWrite: (path: string) => {
    return fsPromiseAPIs.access(path, fs.constants.W_OK);
  },
  canRead: (path: string) => {
    return fsPromiseAPIs.access(path, fs.constants.R_OK);
  },
};

export default fileAction;

// renderer/container/resume/index.ts
import React from 'react';
import './index.less';
import fileAction from '@common/utils/file';

function Resume() {
  // 👇 读取一下当前这个文件内容
  fileAction.read('./index.tsx').then((data) => {
    console.log(data);
  });

  return <div>我是简历模块</div>;
}
export default Resume;

fileAction
  .read(
    '/Users/pengdaokuan/Desktop/pdk/visResumeMook/app/renderer/container/resume/index.tsx'
  )
  .then((data) => {
    console.log(data);
  });

// renderer/common/utils/appPath.ts

// 监听主进程与渲染进程通信
import { ipcRenderer } from 'electron';

// 获取项目绝对路径
export function getAppPath() {
  return new Promise(
    (resolve: (value: string) => void, reject: (value: Error) => void) => {
      ipcRenderer.send('get-root-path', '');
      ipcRenderer.on('reply-root-path', (event, arg: string) => {
        if (arg) {
          resolve(arg);
        } else {
          reject(new Error('项目路径错误'));
        }
      });
    }
  );
}

import { app, ipcMain } from 'electron';

const ROOT_PATH = path.join(app.getAppPath(), '../');

// 👇 监听渲染进程发的消息并回复
ipcMain.on('get-root-path', (event, arg) => {
  event.reply('reply-root-path', ROOT_PATH);
});

import React from 'react';
import './index.less';
import fileAction from '@common/utils/file';
import { getAppPath } from '@common/utils/appPath';

function Resume() {
  getAppPath().then((rootPath: string) => {
    console.log('应用程序的目录路径为: ', rootPath);
    console.log('文件读取，内容数据为: ');
    fileAction
      .read(`${rootPath}app/renderer/container/resume/index.tsx`)
      .then((data) => {
        console.log(data);
      });
  });

  return <div>我是简历模块</div>;
}
export default Resume;