hacker0limbo

redux-promise-middleware 与异步

使用 redux-thunk 时候由于一个请求需要写三个 action, 比较麻烦. redux-promise-middleware 可以在根据 type 自动生成对应的 action, 一个例子如下

action 只需写一个基本的, 对应会生成: FETCH_DATA_PENDING, FETCH_DATA_SUCCESS, FETCH_DATA_REJECTED 三种形式

// action

export const getData = () => {

hacker0limbo

#enables colorin the terminal bash shell export 
export CLICOLOR=1
#setsup thecolor scheme for list export
export LSCOLORS=gxfxcxdxbxegedabagacad

# lambda prompt
export PS1="\[\e[0;35m\]λ\[\e[m\] \[\e[33;40m\]\@\[\e[m\] \[\e[0;32m\]\W \[\e[m\]"

#sets up theprompt color (currently a green similar to linux terminal)

hacker0limbo

两个计数器代码:

使用 class:

import React, {Component} from "react";
import ReactDOM from "react-dom";

class Example extends Component {
  state = {
 count: 0

hacker0limbo

1

面向对象编程的问题是，每个对象都有自己的状态，开发程序时，必须记住当前所有对象的状态。

为了让我们的生活更轻松，最好只有一小部分代码库处理状态，其他代码都是无状态和纯的。实际上，这就是前端的 Redux 库取得巨大成功的主要原因。

-- 《面向对象编程：一万亿美元的错误》

2 React 应该尽量遵守 "有状态的组件没有渲染, 有渲染的组件没有状态" 这一原则, 这句话的意思是:

hacker0limbo

import { createStore, applyMiddleware } from 'redux'
import thunk from 'redux-thunk'
import axios from 'axios'

// 建立一个 local state 负责 loading
const state = {
  loading: false
}

// 这个 action 用于在下面的 fetchUser 里面 dispatch

hacker0limbo

export const name = 'react-redux'

hacker0limbo

每个函数创建的时候, 就会创建一个词法作用域, 当在运行的时候, 创建一个新的词法环境(*注意, 这个词法环境还是要从函数定义的时候开始找, 不过在这个时候函数被定义的词法环境也是有可能改变的*), 这两个作用与很有可能是不同的. 所以分析的时候一定是要看最新的作用域

词法环境包括自己内部的环境, 和引用的外部的环境. 当存在嵌套函数的时候, 外部环境可能还引用更加外部的环境, 就形成了一条作用域链. 最最里层的函数在执行的时候, 会根据这条链子, 由内而外寻找需要的变量. 然后可以对找到的变量进行修改, 修改是在该变量所在的作用域内修改, 也就是说对于闭包来讲, 修改的地方在该函数的外部环境修改, 而非克隆一份放低自己的内部环境内修改

普通(纯)函数是没有状态的, 闭包可以使得函数有状态, 有状态就意味着有记忆, 毕竟状态可以发生改变. 当然, 这里的状态, 不在函数内部, 而是在函数外部, 不过函数可以读取到

有了闭包就可以模拟类的一些效果, 闭包和类都是保存状态用的

每次调用一个函数, 如果这个函数存在闭包, 那么都会创建一个单独的闭包环境, 里面有该闭包的状态. 多次调用这个函数, 会创建多个闭包, 这些闭包内部的环境状态都是独立的. 类似于有一个类, 你可以进行多次实例化, 每次实例化出来的都是不同的对象

hacker0limbo

[x] 字节

• 京东

hacker0limbo

[
	{ "keys": ["ctrl+w"], "command": "delete_word", "args": { "forward": false, "sub_words": true } },
	{ "keys": ["ctrl+u"], "command": "run_macro_file", "args": {"file": "res://Packages/Default/Delete to Hard BOL.sublime-macro"} }
]

hacker0limbo

import {Action, ActionCreator, Dispatch} from 'redux';
import {ThunkAction} from 'redux-thunk';

// Redux action
const reduxAction: ActionCreator<Action> = (text: string) => {
  return {
    type: SET_TEXT,
    text
  };
};