使用Electron,在生产模式下状态更改时,React组件不会刷新,但可以在dev模式下工作

时间:2019-04-04 05:07:35

标签: reactjs react-redux electron electron-builder

我正在尝试创建Electron + React + Redux应用程序。 当我使用redux动作和reducer更改状态时,我的代码在dev模式下运行良好,react组件会自动刷新。 但是当我构建和运行生产发行版时,更改状态无法触发组件渲染(我尝试使用linux并以相同的结果赢得dist)。

知道我在这里缺少什么吗?

这是电子的主要部分:

const window = new BrowserWindow();

  if (isDevelopment) {
    window.webContents.openDevTools()
  }

  if (isDevelopment) {
    window.loadURL(`http://localhost:${process.env.ELECTRON_WEBPACK_WDS_PORT}`)
  }
  else {
    window.loadURL(formatUrl({
      pathname: path.join(__dirname, 'index.html'),
      protocol: 'file',
      slashes: true
    }))
  }

电子渲染源的相关部分:

const store = createStore(ui_input,{});

class Ompui extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <TmpInput/>
      </Provider>
    );
  }
}

我的组件的代码:

//===== Presentation part =====

const TmpInput = (props) => {
  return (
    <div>
      <input type="text" name="txt"
       onChange={(e) => {props.update_ui_input(e.target.value)}}/>
       <p>{props.instuff}</p>
    </div>
  );
};
//===== Container part =====

const mapStateToProps = state => {
  return {
    instuff: state.input,
  };
};

const mapDispatchToProps = dispatch => {
  return bindActionCreators(actionCreators, dispatch);
};

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

我正在使用的动作和减速器代码:

// ====== Actions ======
export const UI_INPUT = "UI_INPUT";

export const update_ui_input = (inval) => { return {type: UI_INPUT, value: inval};};

// ====== Reducers ======
export function ui_input(state=[], action) {
  switch (action.type) {
    case UI_INPUT :
      return Object.assign({},state,{input:action.value});
    default:
      console.log("WARNING: unknown action type:"+action.type)
      return state;
  }
};

还有package.json:

{
  "name": "uitest",
  "author": "padeg",
  "description": "electron react redux experiment",
  "version": "0.0.1",
  "license": "MIT",
  "scripts": {
    "dev": "electron-webpack dev",
    "compile": "electron-webpack",
    "dist": "yarn compile && electron-builder"
  },
  "dependencies": {
    "react": "^16.8.5",
    "react-dom": "^16.8.5",
    "react-redux": "^6.0.1",
    "redux": "^4.0.1",
    "source-map-support": "^0.5.10"
  },
  "devDependencies": {
    "@babel/plugin-proposal-class-properties": "^7.4.0",
    "@babel/preset-react": "^7.0.0",
    "electron-builder": "20.38.4",
    "electron-webpack": "^2.6.2",
    "webpack": "4.28.4"
  }
}

0 个答案:

没有答案