Используя Electron, компонент React не обновляется при изменении состояния в рабочем режиме, но работает в режиме разработки - PullRequest
Новая
       9

Используя Electron, компонент React не обновляется при изменении состояния в рабочем режиме, но работает в режиме разработки

0 голосов
/ 04 апреля 2019

Я экспериментирую с созданием приложения Electron + React + Redux. Мой код работает нормально в режиме разработки, когда я изменяю состояние с помощью действия приращения и редуктора, компонент реакции обновляется автоматически. Но когда я создаю и запускаю производственный дистрибутив, изменение состояния не может вызвать рендеринг компонента (я попробовал 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"
  }
}
...