React - React Redux 数据共享、Redux DevTools、React Redux 最终优化

一、React Redux 数据共享1、基本介绍combineReducers 函数用于汇总所有的 Reducer 变为一个总的 Reducer2、演示1reduxconstant// 定义 action 中 type 的常量值exportconstINCREMENTincrement;exportconstDECREMENTdecrement;exportconstADD_PERSONadd_person;action// 该文件专门为 Count 组件生成 actionimport{INCREMENT,DECREMENT}from../constant;// 同步 actionexportconstcreateIncrementAction(data)({type:INCREMENT,data});exportconstcreateDecrementAction(data)({type:DECREMENT,data});// 异步 action就是 action 的值为函数异步 action 中一般都会调用同步 actionexportconstcreateIncrementAsyncAction(data,time){return(dispatch){setTimeout((){dispatch(createIncrementAction(data));},time);};};import{ADD_PERSON}from../constant;exportconstcreateAddPersonAction(data)({type:ADD_PERSON,data});reducer// 该文件是用于创建一个为 Count 组件服务的 Reducer// Reducer 本质就是一个函数// Reducer 会接收到两个参数preState之前的状态、action动作对象// 从 action 中可以获取到 type 和 data根据 type 决定如何加工 dataimport{INCREMENT,DECREMENT}from../constant;constinitState0;// 初始状态exportdefaultfunctioncountReducer(preStateinitState,action){const{type,data}action;switch(type){caseINCREMENT:returnpreStatedata;caseDECREMENT:returnpreState-data;default:returnpreState;}}import{ADD_PERSON}from../constant;constinitState[];exportdefaultfunctionpersonReducer(preStateinitState,action){const{type,data}action;switch(type){caseADD_PERSON:return[...preState,data];default:returnpreState;}}store// 该文件专门用于暴露一个 store 对象整个应用只有一个 store 对象import{createStore,applyMiddleware,combineReducers}fromredux;importcountReducerfrom./reducers/count;importpersonReducerfrom./reducers/person;importthunkfromredux-thunk;// 汇总所有的 Reducer 变为一个总的 ReducerconstreducercombineReducers({count:countReducer,persons:personReducer,});// applyMiddleware 用于应用基于 Redux 的中间件exportdefaultcreateStore(reducer,applyMiddleware(thunk));2containerCount 容器组件import React, { Component } from react; // 引入 action import { createIncrementAction, createDecrementAction, createIncrementAsyncAction } from ../../redux/actions/count; // 引入 connect 函数用于连接组件与 Redux import { connect } from react-redux; class Count extends Component { // 加 increment () { const { value } this.selectNumber; this.props.jia(value * 1); }; // 减 decrement () { const { value } this.selectNumber; this.props.jian(value * 1); }; // 奇数再加 incrementIfOdd () { const { value } this.selectNumber; const { count } this.props; if (count % 2 ! 0) { this.props.jia(value * 1); } }; // 异步加 incrementAsync () { const { value } this.selectNumber; this.props.jiaAsync(value * 1, 500); }; render() { return ( div h2当前人员数量为{this.props.personCount}/h2 h2当前求和为{this.props.count}/h2 select ref{(c) (this.selectNumber c)} option value11/option option value22/option option value33/option /select nbsp; button onClick{this.increment}/buttonnbsp; button onClick{this.decrement}-/buttonnbsp; button onClick{this.incrementIfOdd}当前求和为奇数再加/buttonnbsp; button onClick{this.incrementAsync}异步加/button /div ); } } // 1. mapStateToProps 函数返回的是一个对象 // 2. 返回的对象中key 就作为传递给组件 props 的 keyvalue 就作为传递给组件 props 的 value // 3. mapStateToProps 函数用于传递状态 function mapStateToProps(state) { return { count: state.count, personCount: state.persons.length, }; } // 1. mapDispatchToProps 函数返回的是一个对象 // 2. 返回的对象中key 就作为传递给组件 props 的 keyvalue 就作为传递给组件 props 的 value // 3. mapDispatchToProps 函数用于传递操作状态的方法 function mapDispatchToProps(dispatch) { return { jia: (number) dispatch(createIncrementAction(number)), jian: (number) dispatch(createDecrementAction(number)), jiaAsync: (number, time) dispatch(createIncrementAsyncAction(number, time)), }; } // 创建并暴露一个 Count 的容器组件 export default connect(mapStateToProps, mapDispatchToProps)(Count);Person 容器组件import React, { Component } from react; import { nanoid } from nanoid; import { connect } from react-redux; import { createAddPersonAction } from ../../redux/actions/person; class Person extends Component { addPerson () { const name this.nameNode.value; const age this.ageNode.value; const personObj { id: nanoid(), name, age }; this.props.addPerson(personObj); this.nameNode.value ; this.ageNode.value ; }; render() { return ( div h2求和为 {this.props.count}/h2 input ref{(c) (this.nameNode c)} typetext placeholder输入名字 / input ref{(c) (this.ageNode c)} typetext placeholder输入年龄 / button onClick{this.addPerson}添加/button ul {this.props.persons.map((p) { return ( li key{p.id} {p.name}--{p.age} /li ); })} /ul /div ); } } function mapStateToProps(state) { return { persons: state.persons, count: state.count, }; } // mapDispatchToProps 的简写如果传入的是对象就自动用 dispatch 包裹每个方法 const mapDispatchToProps { addPerson: createAddPersonAction, }; export default connect(mapStateToProps, mapDispatchToProps)(Person);3mainApp 组件import React, { Component } from react; import Count from ./containers/Count; import Person from ./containers/Person; export default class App extends Component { render() { return ( div Count / hr / Person / /div ); } }index.jsimportReactfromreact;// 引入 React 核心库importReactDOMfromreact-dom;// 引入 ReactDOMimportAppfrom./App;// 引入 App 组件importstorefrom./redux/store;import{Provider}fromreact-redux;ReactDOM.render(Provider store{store}App//Provider,document.getElementById(root),);二、Redux DevTools安装 Edge 浏览器插件Redux DevTools安装redux-devtools-extension依赖pnpminstallredux-devtools-extension2.13.8使用redux-devtools-extension依赖// 该文件专门用于暴露一个 store 对象整个应用只有一个 store 对象import{createStore,applyMiddleware,combineReducers}fromredux;importcountReducerfrom./reducers/count;importpersonReducerfrom./reducers/person;importthunkfromredux-thunk;import{composeWithDevTools}fromredux-devtools-extension;// 汇总所有的 Reducer 变为一个总的 ReducerconstreducercombineReducers({count:countReducer,persons:personReducer,});// applyMiddleware 用于应用基于 Redux 的中间件exportdefaultcreateStore(reducer,composeWithDevTools(applyMiddleware(thunk)));三、React Redux 最终优化1、reduxconstantexportconstINCREMENTincrement;exportconstDECREMENTdecrement;exportconstADD_PERSONadd_person;actionimport{INCREMENT,DECREMENT}from../constant;exportconstcreateIncrementAction(data)({type:INCREMENT,data});exportconstcreateDecrementAction(data)({type:DECREMENT,data});exportconstcreateIncrementAsyncAction(data,time){return(dispatch){setTimeout((){dispatch(createIncrementAction(data));},time);};};import{ADD_PERSON}from../constant;exportconstcreateAddPersonAction(data)({type:ADD_PERSON,data});reducerimport{INCREMENT,DECREMENT}from../constant;constinitState0;exportdefaultfunctioncountReducer(preStateinitState,action){const{type,data}action;switch(type){caseINCREMENT:returnpreStatedata;caseDECREMENT:returnpreState-data;default:returnpreState;}}import{ADD_PERSON}from../constant;constinitState[];exportdefaultfunctionpersonReducer(preStateinitState,action){const{type,data}action;switch(type){caseADD_PERSON:return[...preState,data];default:returnpreState;}}import{combineReducers}fromredux;importcountReducerfrom./count;importpersonReducerfrom./person;exportdefaultcombineReducers({countReducer,personReducer,});storeimport{createStore,applyMiddleware}fromredux;importreducerfrom./reducers;importthunkfromredux-thunk;import{composeWithDevTools}fromredux-devtools-extension;exportdefaultcreateStore(reducer,composeWithDevTools(applyMiddleware(thunk)));2、containerCount 容器组件import { Component } from react; import { createIncrementAction, createDecrementAction, createIncrementAsyncAction } from ../../redux/actions/count; import { connect } from react-redux; class Count extends Component { // 加 increment () { const { value } this.selectNumber; this.props.increment(value * 1); }; // 减 decrement () { const { value } this.selectNumber; this.props.decrement(value * 1); }; // 奇数再加 incrementIfOdd () { const { value } this.selectNumber; const { countReducer } this.props; if (countReducer % 2 ! 0) { this.props.increment(value * 1); } }; // 异步加 incrementAsync () { const { value } this.selectNumber; this.props.incrementAsync(value * 1, 500); }; render() { return ( div h2当前人员数量为{this.props.personCount}/h2 h2当前求和为{this.props.countReducer}/h2 select ref{(c) (this.selectNumber c)} option value11/option option value22/option option value33/option /select nbsp; button onClick{this.increment}/buttonnbsp; button onClick{this.decrement}-/buttonnbsp; button onClick{this.incrementIfOdd}当前求和为奇数再加/buttonnbsp; button onClick{this.incrementAsync}异步加/button /div ); } } export default connect( (state) ({ countReducer: state.countReducer, personCount: state.personReducer.length, }), { increment: createIncrementAction, decrement: createDecrementAction, incrementAsync: createIncrementAsyncAction, }, )(Count);Person 容器组件import { Component } from react; import { nanoid } from nanoid; import { connect } from react-redux; import { createAddPersonAction } from ../../redux/actions/person; class Person extends Component { addPerson () { const name this.nameNode.value; const age this.ageNode.value; const personObj { id: nanoid(), name, age }; this.props.addPerson(personObj); this.nameNode.value ; this.ageNode.value ; }; render() { return ( div h2求和为 {this.props.countReducer}/h2 input ref{(c) (this.nameNode c)} typetext placeholder输入名字 / input ref{(c) (this.ageNode c)} typetext placeholder输入年龄 / button onClick{this.addPerson}添加/button ul {this.props.personReducer.map((p) { return ( li key{p.id} {p.name}--{p.age} /li ); })} /ul /div ); } } export default connect( (state) ({ countReducer: state.countReducer, personReducer: state.personReducer, }), { addPerson: createAddPersonAction, }, )(Person);3、mainApp 组件import{Component}fromreact;importCountfrom./containers/Count;importPersonfrom./containers/Person;exportdefaultclassAppextendsComponent{render(){return(divCount/hr/Person//div);}}index.jsimportReactDOMfromreact-dom;importAppfrom./App;importstorefrom./redux/store;import{Provider}fromreact-redux;ReactDOM.render(Provider store{store}App//Provider,document.getElementById(root),);