学习回顾
React和Electron结合
TypeError: fs.existsSync is not a function
在React组件里引入electron时候就会报这个错,主要原因是在React里不能引入Node.js的模块
解决方法
- Webpack target属性
先展开Create-React-App所有配置
npm run eject
在webpack.config.js下添加配置
// other configs...
module.exports = function(webpackEnv) {
// some configs
return {
target: 'electron-renderer', // 添加target
// other configs
}
}
- 预编译引入electron
在electron主进程创建窗口时加入属性
win = new BrowserWindow({
width: 1150,
height: 580,
webPreferences: {
preload: __dirname + '/renderer.js'
}
});
在renderer.js里加入
global.electron = require('electron')
在index.html引入
<script>require('./renderer.js')</script>
- 直接使用window引入
const electron = window.require('electron')
combineReducers的使用
import { combineReducers } from 'redux'
combineReducers函数的参数是若干个拆分完的reducer片段
export default combineReducers({
register: registerChange,
login: loginInfoChange,
})
在使用了combineReducers,state就会根据combineReducers的参数进行合并,上面的结合完的state就会变成
state = {
register: {
...
},
login: {
...
}
}
各自内部的结构就根据每个子Reducer的初始state来决定
//loginInfoChange的初始状态
const initialState = {
email: '',
password: '',
}
这样state就会被合并为
state = {
register: {
...
},
login: {
email: '',
password: '',
}
}
mongoDB操作
根据MongoDB node.js Driver的文档来看,提供了callback和promise两种方法,妥妥选择promise
Promise
promise提供了异步编程的新方法
总的来说promise本身就是一个异步操作,但它提供了更优雅的方式来控制异步
创建promise对象
new Promise(function(resolve, reject) {
// ... some code
if (/* 异步操作成功 */){
resolve(value);
} else {
reject(error);
}
});
then方法接收resolved状态的回调函数
promise.then(function(value) {
// success
}, function(error) {
// failure
});
可以接受两个参数来接收resolve状态和reject状态,一般只指定resolve状态
链式then,then方法里如果是一个函数,则将返回值作为下一个then调用的参数,还可以是promise对象,这时后一个回调函数,就会等待该Promise对象的状态发生变化
mongonConnect
.then(db => checkRepeatEmail(db, user.email))
.then((db) => {
addUser(db, user)
response.send(SUCCESS_MESSAGE)
})
catch方法,用于接住reject发出时回调函数
mongonConnect
.then(db => checkRepeatEmail(db, user.email))
.then((db) => {
addUser(db, user)
response.send(SUCCESS_MESSAGE)
})
.catch((err) => {
if (err === 'EMAIL_EXISTING') {
response.send(EAMIL_FAILED_MESSAGE)
} else {
response.send(500)
}
})
Coding
跳出登录总结一下
- View发出action
- 通过redux-thunk在action中执行函数
- action中像服务器验证账号
- 服务器返回响应
- 根据响应改变状态
container组件
通过react-redux的connect把方法映射到展示组件上
signInUser: () => {
dispatch(signInUser())
},
action
通过中间件在action中执行函数,来向服务器发送请求再根据服务器响应来分发状态
export const signInUser = () => (dispatch, getState) => {
const email = getState().login.email
const password = getState().login.password
fetchSignIn(email, password)
.then((response) => {
if (response.status === 200) {
const path = '/home'
browserHistory.push(path)
dispatch(signInSuccess())
} else if (response.status === 400) {
dialog.showMessageBox({
title: '提示',
message: response.message,
})
dispatch(signInFail())
}
})
}
服务器端
向数据层验证数据之后返回响应
function signinForUser(user, response) {
const email = user.email
const password = user.password
mongonConnect
.then(db => verifyPassword(db, email, password))
.then((message) => {
if (message === SIGNIN_SUCCESS) {
response.send(SIGNIN_SUCCESS_MESSAGE)
}
})
.catch((message) => {
if (message === USER_NO_EXIST) {
response.send(USER_NO_EXIST_MESSAGE)
} else if (message === PASSWORD_ERROR) {
response.send(PASSWORD_ERROR_MESSAGE)
}
})
}
原文地址:https://www.cnblogs.com/secoding/p/11122986.html