三、React全家桶（一）

Z时代
2024-01-10
分类：综合

react

Reducer

什么是Reducer？

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

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

修改传入的参数

执行有副作用的操作，如API请求或路由跳转

调用非纯函数，如 Date.now() 或 Math.random()

什么是reduce

const array1 = [1, 2, 3, 4];
// 类似累加：accumulator为total，currentValue为当前value
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

函数聚合

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

现在想输出： f1 f2 f3

方法1：f1();f2();f3();

方法2：f3(f2(f1()))

方法3：

function compose(...funcs){
  const len = funcs.length
  if(len === 0) return arg => arg
  if(len === 1) return funcs[0]
  return funcs.reduce((left, right)=>(...args)=>right(left(...args)))
}
compose(f1,f2,f3)()

Redux上手

Redux是JavaScript应用的状态容器。它保证程序行为一致性且易于测试。

安装redux： npm install redux --save

用一个累加器举例：

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';
function counterReducer(state=0, action){
  // console.log(state);
  switch (action.type){
    case "add":
      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({})
    })
  }
  render() {
    // console.log('ReduxPage', store);
    return (
      <div>
        <h1>ReduxPage</h1>
        <p>counter:{store.getState()}</p>
        <button onClick={() => store.dispatch({type: 'add'})}>add</button>
      </div>
    )
  }
}

检查点

1、createStore 创建 store

2、reducer 初始化、修改状态函数

3、getState 获取状态值

4、dispatch 提交更新

5、subscribe 变更订阅

react-redux

每次都重新调用 render 和 getState 太low了，想用更react的方式来写，需要react-redux的支持

npm install react-redux --save

提供了两个api

1、Provider 为后代组件提供store

2、connect 为组件提供数据和变更方法

全局提供store，index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import store from './store/reactReduxStore';
import {Provider} from 'react-redux';
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>  
, document.getElementById('root'));

reactReduxStore.js

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

ReactReduxPage.js

import React, { Component } from 'react'
import {connect} from 'react-redux';
class ReactReduxPage extends Component {
  render() {
    console.log(this.props);
    const {counter, add, minus} = this.props
    return (
      <div>
        <h1>ReactReduxPage</h1>
        <p>counter:{counter}</p>
        <button onClick={add}>add</button>
        <button onClick={minus}>minus</button>
      </div>
    )
  }
}
export default connect(
  // mapStateToProps
  state=>{
    return {counter: state}
  },
  // mapDispatchToProps
  {
    add: ()=>{
      return {
        type: 'add'
      }
    },
    minus: ()=>{
      return {
        type: 'minus'
      }
    }
  }
)(ReactReduxPage)

异步

Redux只是个纯粹的状态管理器，默认只支持同步，实现异步任务比如延迟、网络请求，需要中间件的支持，比如我们试用最简单的redux-thunk和redux-logger

npm install redux-thunk redux-logger --save

应用中间件，store.js

import {createStore, applyMiddleware} from 'redux';
import logger from "redux-logger"
import thunk from "redux-thunk";
const store = createStore(counterReducer, applyMiddleware(logger, thunk))

使用异步操作时的变化，ReduxTest.js

const mapDispatchToProps = {
  add: ()=>{
    return {
      type: 'add'
    }
  },
  minus: ()=>{
    return {
      type: 'minus'
    }
  },
  asyAdd: () => dispatch =>{
    setTimeout(() => {
      // 异步结束后，手动调用 dispatch
      dispatch({
        type: 'add'
      })
    }, 1000);
  }
}

代码抽取

抽离reducer和action

1、抽离action

action/reactReduxPage.js

export const add = ()=>{
  return {
    type: 'add'
  }
}
export const minus= ()=>{
  return {
    type: 'minus'
  }
}
export const asyAdd= () => dispatch =>{
  setTimeout(() => {
    // 异步结束后，手动调用 dispatch
    dispatch({
      type: 'add'
    })
  }, 1000);
}

// 对应的ReactReduxPage文件直接引用

import React, { Component } from 'react'

import {connect} from 'react-redux';

import {add, minus,asyAdd} from '../action/reactReduxPage'; // 此处直接引用

class ReactReduxPage extends Component {

render() {

console.log(this.props);

const {counter, add, minus, asyAdd} = this.props

return (

<div>

<h1>ReactReduxPage</h1>

<p>counter:{counter}</p>

<button onClick={minus}>minus</button>

<button onClick={asyAdd}>asyAdd</button>

</div>

)

}

const mapStateToProps = state => {

return {

counter: state

}

const mapDispatchToProps = {

add,

minus,

asyAdd

}

export default connect(

// mapStateToProps

mapStateToProps,

// mapDispatchToProps --- 直接引用

mapDispatchToProps

)(ReactReduxPage)

2、抽离reducer

store/counterReducer.js

export default function counterReducer(state=0, action){
  // console.log(state);
  switch (action.type){
    case "add":
      return state + 1
    case "minus":
      return state - 1
    default:
      return state
  }
}

reactReduxStore.js调用

import {createStore, applyMiddleware} from 'redux';
import logger from "redux-logger"
import thunk from "redux-thunk";
import counterReducer from './counterReducer';
const store = createStore(counterReducer, applyMiddleware(logger, thunk))
export default store

如果有多个中间件 --- combineReducers

reactReduxStore.js

import {createStore, applyMiddleware, combineReducers} from 'redux'; 
import logger from "redux-logger"
import thunk from "redux-thunk";
import counterReducer from './counterReducer';
import counterReducer2 from './counterReducer';
// 如果有多个中间件，则用combineReducers
const store = createStore(
  combineReducers({
    counter: counterReducer,
    counter2: counterReducer2
  }), 
  applyMiddleware(logger, thunk)
)
export default store

ReactReduxPage.js做出修改

const mapStateToProps = state => {
  console.log(state); // {counter: 0, counter2: 0}
  // return需要做修改
  // return { counter: state }  
  return { counter: state.counter }
}

Redux拓展

redux核心实现：

存储状态state

获取状态getState

更新状态dispatch

MyReduxPage.js

import React, {Component} from 'react'
import store from '../../store/MyReduxStore'; // 这里做出了修改
export default class MyReduxPage extends Component {
  componentDidMount(){
    store.subscribe(()=>{
      this.setState({})
    })
  }
  render() {
    return (
      <div>
        <h1>ReduxPage</h1>
        <p>counter:{store.getState()}</p>
        <button onClick={() => store.dispatch({type: 'add'})}>add</button>
        <button onClick={() => store.dispatch({type: 'minu'})}>minu</button>
      </div>
    )
  }
}

MyReduxStore.js

import {createStore} from '../kRedux';
function counterReducer(state=0, action){
  // console.log(state);
  switch (action.type){
    case "add":
      return state + 1
    case "minu":
      return state - 1
    default:
      return state
  }
}
const store = createStore(counterReducer)
export default store

kRedux.js

export function createStore(reducer){
  let currentState = undefined
  let currentListeners = []
  function getState(){
    return currentState
  }
  function dispatch(action){
    currentState = reducer(currentState, action)
    currentListeners.map(cl=>cl())
  }
  function subscribe(listener){
    currentListeners.push(listener)
  }
  dispatch({type: '@IMOOC/REDUX'}) // 这里随意写type值，本意是要初始化执行一次
  return {
    getState,
    dispatch,
    subscribe
  }
}

中间件实现