react_结合 redux - 高阶函数 - 高阶组件 - 前端、后台项目打包运行

Redux 独立的集中式状态管理 js 库 - 参见 My Git

不是 react 库，可以与 angular、vue 配合使用，通常和 react 用

yarn add redux

import {createStore} from "redux"

const store = createStore(myCounter);    // 1. 核心 API - 参数是 reducer 函数---> 根据现有的状态及 action 返回一个新的状态，给 store 管理

import {INCREMENT, DECREMENT} from "./action-types"    // 有几个 case，就要定义几个 action 工厂

export default function myCounter(state=0, action){    // 由 store 内部调用,初始值为 0 ./redux/reducers

switch(action.type){    // action 一定要有一个 type 属性

case INCREMENT:{return state+action.numbe;brack;}

case INCREMENT:{return state+action.numbe;brack;}

default: return state

}

}

<App store={store}

import {INCREMENT, DECREMENT} from "./action-types"

export const INCREMENT = "increment";

export const DECREMENT = "decrement";

import * as actions from "../redux/actions";

this.props.store.dispatch(actions.increment(number));    // action creator 产生一个 action 对象，然后 dispatch 这个行为 action

// 虽然等同于 this.props.store.dispatch({type: INCREMENT, number}); 但是一般不这么做

// 工厂函数 - 每次调用，返回一个新的对象 - 每次都返回一个 actions

this.props.store.getState();

• action

如果是 对象，则是 同步 action ---- 返回一个对象，描述行为、state 参数

export const menuTitle = (menuTitle)=>({tyle: SETMENUTITLE, data: menuTitle})

如果是 函数，则是 异步 action

返回一个 函数，该函数接收一个 dispatch 参数

该函数内部进行异步操作，有了结果以后，再 dispatch 同步 action

export const login = ()=>{

return dispatch=>{

// 1. 执行异步代码

const result = await requestLogin(username, password);

// 2. 分发同步 action

if(result.status === 0){

}else{

}

}

}

• reducer

根据现有的 state 和 action 生成新的 state

• const store = createStore(myReducer)    // 根据 n 个现有需要管理的 state 和 action 返回一个新的 state，给 store 集中管理
• store 最核心的 管理对象---- 与 react 的交互就是 读 和 更新

存储状态数据的对象

维护着 state 和 reducer

核心方法

• 获取状态 store.getState()   
• 更新状态 store.dispatch(action-creator) 

对象 action

• 必须有 type 标识属性，值为字符串
• 可选数据属性，值为任意类型
• 订阅一个监听函数 subscribe(listener)

什么时候用 redux？

某个组件的状态需要共享

一个组件需要改变全局状态

一个组件需要改变另一个组件的状态

总体原则： 能不用就不用，如果不用比较吃力才考虑使用

不用 redux 时的集中状态管理？

将多个组件的共用状态放在共同的父组件中

将状态的相关方法定义在与状态相同的组件中

官方实例分析？

redux 编程：

---------------------------------------------------------------------------------------------------------

src/redux/store.js

import {createStore} from "redux"

import reducer from "./reducer"

export default creareStore(reducer);    // 创建 store 对象，内部会第一次自调用 reducer 函数得到一个初始的状态值进行保存

---------------------------------------------------------------------------------------------------------

src/redux/reducer.js

import {INCREMENT, DECREMENT} form "./action-types"

export default  function count(state=1 action){    // 管理 count 就可以叫 count，state 本身就是要管理的数据，第一次展示显示 1

switch(action.type){

case INCREMENT:{return state+action.number;}

case INCREMENT:{return state-action.number;}

default: return state;    // 不做任何处理

}

}

---------------------------------------------------------------------------------------------------------

src/redux/actions.js    // 包含 n 个 action-creator 函数

import {INCREMENT, DECREMENT} form "./action-types"

export const increate = (number)=>({type: INCREMENT, number});

export const decreate = (number)=>({type: DECREMENT, number});

---------------------------------------------------------------------------------------------------------

src/redux/action-types.js    // 多个 js 共用

export const INCREMENT = "increment";

export const DECREMENT = "decrement";

---------------------------------------------------------------------------------------------------------

src/index.js

import React from "react"

import ReactDOM from "react-dom"

import App from "./App.jsx"

import store from "./redux/store"

ReactDOM.render(<App store={store} />, document.getElementById("root"));

store.subscribe(()=>{

ReactDOM.ummountComponentAtNode(document.getElementById("root"));    // 先卸载原来的组件

ReactDOM.render(<App store={store} />, document.getElementById("root"));

})

---------------------------------------------------------------------------------------------------------

src/App.jsx

import React, {PureComponent} from "react"

import * as actions from "./redux/actions"

export default class App extends PureComponent{

increment = ()=>{

const number = +this.refs.numberSelect.value;

this.props.store,dispatch(actions.increment(number));

}

decrement = ()=>{

const number = +this.refs.numberSelect.value;

this.props.store,dispatch(actions.decrement(number));

}

render(){

const count = this.props.store.getState();

}

}

问题： react 与 redux 耦合度太强了，直接使用了 store

解决： 使用 react 的插件库 react-redux ---- 简化 react 中使用 redux

----------------------------------------- react 与 redux 的连接库--------------------------------------------

Provider

向所有容器组件提供 store

connect(生成 容器组件，负责向 UI 组件传递标签属性

第一参数： 函数 ---- 一般属性从 state 中获取

state=>({title: state.menuTitle})

第二参数： 原始函数/简写对象{actionCreator1, action2}---- 函数属性，执行 dispatch 分发 action-creator

)(UI组件)

---------------------------------------------------------

src/index.js

import React from "react"

import ReactDOM from "react-dom"

import App from "./App.jsx"

import store from "./redux/store"

import {Provider} from "react-redux"

-------------------------------------------------------------------------------------------------------------------

src/App.jsx

import React, {PureComponent} from "react"

import {connect} from 'react-redux'

imoprt Counter from "./components/Counter"

imoprt {increment, decrement]} from "./redux/actions"

function mapStateToProps(state){    // 读取 state 数据，并将其映射成 UI 组件的一般属性

return {count: state}

}

function mapDispatchToProps(dispatch){    // 为 UI 组件映射函数属性，函数内部必须 dispatch，分发 action，产生新的 state，重新 render

return {

incremrnt: number=>dispatch(increment(number))

decremrnt: number=>dispatch(decrement(number))

}

}

export default connect(

mapStateToProps,    // 用来确定向 UI 组件传递哪一些一般属性 count

mapDispatchToProps    // 用来确定向 UI 组件传递哪些函数属性 increment、decrement

)(Counter)        // 用 connect 函数包装一下 App 组件，返回一个新的组件对象

-------------------------------------------------------------------------------------------------------------------

src/components/Counter.jsx

1

react-redux 将组件分为

UI 组件

不会使用任何 redux 相关的语法

最终，值还是要被 store 管理的 ，getState()、dispatch()、

容器组件： 通过 connect 包装 UI 组件生成的组件，内部可以看见 store

1. 向 UI 组件传递一般属性，属性值 会以 state 传递

传递 状态 以及操作 store  的相关函数到 reducer 中

2. 属性值函数内部必然执行 dispatch 去分发 action

最终的简洁写法-------------------------------------------------------------------------------------

redux 异步编程

下载 异步中间件 yarn add redux-thunk

store.js

import thunk from "redux-thunk"    // 中间件，扩展 redux 使其可以 action-creator 可以返回 函数

import {createStore, applyMiddleware} from "redux"

import reducer from "./reducer"

export default createStore(reducer, applyMiddleware(thunk));

actions.js 红中增加 异步 action　　

返回的是一个函数，函数会接收一个参数：dispatch

dispatch函数可以执行异步代码, 有了结果，再分发一个同步的 action

export const increment = (number)=>({type:"increment", number})

export const incrementAsync = number=>{

return dispatch=>{

setTimeout(()=>{

dispatch(increment(number))

}, 1000)

}

}

redux 与 chrome 调试工具

yarn add redux-devtools-extension

combineReducers()

纯函数 ---- 同样的输入，得到同样的输出

不得修改参数    {...state, username: "test"}

不得调动 系统 I/O 的 API

不能调动不纯的 Date.now()  或者 Math.random() 等函数

高阶函数 ---- 参数是函数 或者 返回值是函数

filter、map、addEventListener、

高阶组件 ---- 函数接收一个组件，产生的新组件

connect

前端项目 和 后台服务器项目 各自独立运行

会产生 资源未找到 或者 跨域

• 需要 后台工程师 进行代理服务器配置
• 或者 将 前端项目 和 后台服务器项目 合并

前端项目 置于 后台服务器项目的 public

问题：

BrowserRouter 传递 state ---- 以致于访问 被置为后台路由处理了

解决：

自定义中间件处理

后台没有一个页面能够处理时，查看是否有前台页面可以返回

前台路由路径 不能与 后台路由路径 一样

专门的组件页面 应对 404 和 500 页面

啊