React 基礎(chǔ)鞏固(三十三)——Redux的使用詳解

Redux的使用詳解

1. 針對React 基礎(chǔ)鞏固（三十二）中的案例，我們希望抽取頁面中共有的代碼（例如下方的代碼），使用高階組件統(tǒng)一攔截。

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

2. 為了讓react和redux產(chǎn)生聯(lián)系，安裝一款工具react-redux

   npm install react-redux
   

3. 使用react-redux ，在index.js中統(tǒng)一注入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()的返回值是一個高階函數(shù)
   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. 繼續(xù)優(yōu)化代碼，利用react-redux中的connect對state和dispatch進行解耦。在基礎(chǔ)鞏固（三二）中的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，優(yōu)化如下：文章來源地址http://www.zghlxwxcb.cn/news/detail-606467.html

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()的返回值是一個高階函數(shù)
// 映射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. 查看運行結(jié)果
   

到了這里，關(guān)于【前端知識】React 基礎(chǔ)鞏固(三十三)——Redux的使用詳解的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！