React全家桶及原理解析

• React全家桶及原理解析
  • 课堂⽬标
  • 资源
  • 起步
  • Reducer
    • 什么是reducer
    • 什么是reduce
  • Redux 上⼿
    • 安装redux
    • redux上⼿
    • 检查点
  • react-redux
    • 异步
    • 代码抽取
  • Redux拓展
    • redux原理
      • 核⼼实现
      • 中间件实现
    • redux-thunk原理
    • react-redux原理
      • 实现kreact-redux
      • 实现bindActionCreators
• 作业

课堂⽬标

1. 掌握redux
2. 掌握redux中间件
3. 实现redux、react-redux及其中间件原理

资源

1. redux
2. react-redux

起步

Reducer

什么是reducer

reducer 就是⼀个纯函数，接收旧的 state 和 action，返回新的 state。

;(previousState, action) => newState

之所以将这样的函数称之为 reducer，是因为这种函数与被传⼊
Array.prototype.reduce(reducer, ?initialValue) ⾥的回调函数属
于相同的类型。保持 reducer 纯净⾮常重要。永远不要在 reducer ⾥做这些操作：

• 修改传⼊参数；
• 执⾏有副作⽤的操作，如 API 请求和路由跳转；
• 调⽤⾮纯函数，如 Date.now() 或 Math.random()。

什么是reduce

此例来⾃https://developer.mozilla.org/en-US/docs/Web/JavaScript/Ref
erence/Global_Objects/Array/Reduce

const array1 = [1, 2, 3, 4];
const reducer = (accumulator, currentValue) => accumulator + currentValue;
// 1 + 2 + 3 + 4
console.log(array1.reduce(reducer));
// expected output: 10
// 5 + 1 + 2 + 3 + 4
console.log(array1.reduce(reducer, 5));
// expected output: 15

思考：有如下函数， 想要顺序输出1 2 3，如何处理。

function f1() {console.log("f1");
}
function f2() {console.log("f2");
}
function f3() {console.log("f3");
}

⽅法1：

f1();f2();f3();

⽅法2：

f3(f2(f1()));

⽅法3：

function compose(...funcs) {if (funcs.length === 0) {console.log("empty");} else if (funcs.length === 1) {return funcs[0];} else {return funcs.reduce((left, right) => (...args) => right(left(...args)));}
}
compose(f1,f2,f3,
)();

Redux 上⼿

Redux是JavaScript应⽤的状态容器。它保证程序⾏为⼀致性且易于测试。

安装redux

npm install redux --save

redux上⼿

redux较难上⼿，是因为上来就有太多的概念需要学习 ，⽤⼀个累加器举例

1. 需要⼀个store来存储数据
2. store⾥的reducer初始化state并定义state修改规则
3. 通过dispatch⼀个action来提交对数据的修改
4. action提交到reducer函数⾥，根据传⼊的action的type，返回新的state

创建store，src/store/ReduxStore.js

import {createStore} from 'redux'
const counterReducer = (state = 0, action) => {switch (action.type) {case 'add':return state + 1case 'minus':return state - 1default:return state}}
const store = createStore(counterReducer)
export default store

创建ReduxPage

import React, { Component } from "react";
import store from "../store/ReduxStore";
export default class ReduxPage extends Component {componentDidMount() {store.subscribe(() => {console.log("subscribe");this.forceUpdate();//this.setState({});});}add = () => {store.dispatch({ type: "add" });};minus = () => {store.dispatch({ type: "minus" });};stayStatic = () => {store.dispatch({ type: "others" });};render() {console.log("store", store);return (<div><h1>ReduxPage</h1><p>{store.getState()}</p><button onClick={this.add}>add</button><button onClick={this.minus}>minus</button><button onClick={this.stayStatic}>static</button></div>);}
}

如果点击按钮不能更新，因为没有订阅状态变更

还可以在src/index.js的render⾥订阅状态变更

import store from './store/ReduxStore'
const render = () => {ReactDom.render(<App/>,document.querySelector('#root'))
}
render()
store.subscribe(render