自己做网站导航页,文汇智能建站平台,asp网站后台上传不了图片,广东建的电商网站叫啥lesson4-react全家桶及原理解析.mov React全家桶及原理解析 React全家桶及原理解析 课堂⽬标资源起步Reducer 什么是reducer什么是reduceRedux 上⼿ 安装reduxredux上⼿检查点react-redux 异步代码抽取Redux拓展 redux原理 核⼼实现中间件实现redux-thunk原理react-redux原理 实… lesson4-react全家桶及原理解析.mov React全家桶及原理解析
React全家桶及原理解析 课堂⽬标资源起步Reducer 什么是reducer什么是reduce Redux 上⼿ 安装reduxredux上⼿检查点 react-redux 异步代码抽取 Redux拓展 redux原理 核⼼实现中间件实现 redux-thunk原理react-redux原理 实现kreact-redux实现bindActionCreators 作业课堂⽬标
掌握redux掌握redux中间件实现redux、react-redux及其中间件原理资源
reduxreact-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 (divh1ReduxPage/h1p{store.getState()}/pbutton onClick={this.add}add/buttonbutton onClick={this.minus}minus/buttonbutton 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
