【前端知识】React 基础巩固(三十三)——Redux的使用详解

React 基础巩固(三十三)——Redux的使用详解

Redux的使用详解

1. 针对React 基础巩固（三十二）中的案例，我们希望抽取页面中共有的代码（例如下方的代码），使用高阶组件统一拦截。

   constructor() {super();this.state = {counter: store.getState().counter,};
   }
   componentDidMount() {store.subscribe(() => {const state = store.getState();this.setState({counter: state.counter,});});
   }
   

2. 为了让react和redux产生联系，安装一款工具react-redux

   npm install react-redux
   

3. 使用react-redux ，在index.js中统一注入store

   import React from "react";
   import ReactDOM from "react-dom/client";
   import App from "./App";
   import { Provider } from "react-redux";
   import store from './store'const root = ReactDOM.createRoot(document.getElementById("root"));
   root.render(<React.StrictMode><Provider store={store}><App /></Provider>
   </React.StrictMode>
   );

4. 新建about.js页面，通过react-redux引入store

   import React, { PureComponent } from "react";
   import { connect } from "react-redux";export class about extends PureComponent {render() {const { counter } = this.props;return (<div><div>About: {counter}</div></div>);}
   }// connect()的返回值是一个高阶函数
   const mapStateToProps = (state) => ({counter: state.counter,
   });export default connect(mapStateToProps)(about);

5. 在App.jsx中引入新的about.jsx页面，查看运行效果

   import React, { PureComponent } from "react";
   import Home from "./pages/home";
   import Profile from "./pages/profile";
   import About from "./pages/about";
   import "./style.css";
   import store from "./store";export class App extends PureComponent {constructor() {super();this.state = {counter: store.getState().counter,};}componentDidMount() {store.subscribe(() => {const state = store.getState();this.setState({counter: state.counter,});});}render() {const { counter } = this.state;return (<div><h2>App Counter: {counter}</h2><div className="pages"><Home /><Profile /><About /></div></div>);}
   }export default App;

6. 继续优化代码，利用react-redux中的connect对state和dispatch进行解耦。在基础巩固（三二）中的home.jsx页面中，state和dispatch如下表示：

import React, { PureComponent } from "react";
import store from "../store";
import { addNumberAction } from "../store/actionCreators";
export class home extends PureComponent {constructor() {super();this.state = {counter: store.getState().counter,};}componentDidMount() {store.subscribe(() => {const state = store.getState();this.setState({counter: state.counter,});});}addNumber(num) {store.dispatch(addNumberAction(num));}render() {const { counter } = this.state;return (<div>home counter:{counter}<div><button onClick={(e) => this.addNumber(1)}>+1</button><button onClick={(e) => this.addNumber(5)}>+5</button><button onClick={(e) => this.addNumber(8)}>+8</button></div></div>);}
}export default home;

为了将页面与store解耦，在about.jsx中，我们不再使用home.jsx的方式使用state和dispatch，优化如下：

import React, { PureComponent } from "react";
import { connect } from "react-redux";
import { addNumberAction, subNumberAction } from "../store/actionCreators";export class about extends PureComponent {calcNumber(num, isAdd) {if (isAdd) {this.props.addNumber(num);} else {this.props.subNumber(num);}}render() {const { counter } = this.props;return (<div><h2>About: {counter}</h2><div><button onClick={(e) => this.calcNumber(6, true)}>+6</button><button onClick={(e) => this.calcNumber(6, false)}>-6</button><button onClick={(e) => this.calcNumber(8, true)}>+8</button><button onClick={(e) => this.calcNumber(8, false)}>-8</button></div></div>);}
}// connect()的返回值是一个高阶函数
// 映射state到props
const mapStateToProps = (state) => ({counter: state.counter,
});// 映射dispatch到props
const mapDispatchToProps = (dispatch) => ({addNumber(num) {dispatch(addNumberAction(num));},subNumber(num) {dispatch(subNumberAction(num));},
});export default connect(mapStateToProps, mapDispatchToProps)(about);

7. 查看运行结果