GitHub StackChat https://github.com/dejavudwh/StackChat
学习回顾
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>
直接使用 Windows 引入
const electron = Windows.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)
- }
- })
- }
来源: http://www.bubuko.com/infodetail-3111501.html