React全家桶及原理解析-lesson4-Redux

lesson4-react全家桶及原理解析.mov

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 + 1
	 	case 'minus':
	 		return state - 1
	 	default:
	 		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