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

本文主要是介绍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
作业

课堂⽬标

掌握redux
掌握redux中间件
实现redux、react-redux及其中间件原理

资源

redux
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~~较难上⼿，是因为上来就有太多的概念需要学习~~ ，⽤⼀个累加器举例

需要⼀个store来存储数据
store⾥的reducer初始化state并定义state修改规则
通过dispatch⼀个action来提交对数据的修改
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