三、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)