react-redux庫(kù)使用Redux

上一篇文章演示React中直接使用Redux的使用過程是十分繁瑣的, 并且有許多重復(fù)代碼

但是實(shí)際上redux官方幫助我們提供了 react-redux 的庫(kù)，這個(gè)庫(kù)是幫助我們完成連接redux和react的輔助工具, 可以直接在項(xiàng)目中使用，并且實(shí)現(xiàn)的邏輯會(huì)更加的嚴(yán)謹(jǐn)和高效

這篇我們就可以使用react-redux庫(kù)將上一篇文章的計(jì)數(shù)器案例進(jìn)行優(yōu)化

安裝react-redux: yarn add react-redux或npm i react-redux

使用react-redux這個(gè)庫(kù)分成兩個(gè)步驟

步驟一: react-redux庫(kù)只需要提供一次store, 我們?cè)趇ndex.js中為App根組件提供store, 方式如下:

// index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
// 引入Provider和store
import { Provider } from 'react-redux';
import store from './store';

const root = ReactDOM.createRoot(document.querySelector('#root'));
root.render(
  // 在Provider聲明要提供哪一個(gè)store
  <Provider store={store}>
    <App/>
  </Provider>
);

步驟二: 在要使用store的地方, 通過connect函數(shù)將組件和store連接起來

connect函數(shù)是一個(gè)高階函數(shù), 該函數(shù)返回一個(gè)高階組件, 而高階組件又是一個(gè)函數(shù), 所以我們通常見到connect函數(shù)是這樣調(diào)用的connect(fn1, fn2)(組件)

store中的狀態(tài)可能是非常多的, 而connect函數(shù)的參數(shù)的作用是, 要將store中的哪些數(shù)據(jù)或者方法映射過去, 我們就可以根據(jù)自己的需求, 決定映射過去哪些數(shù)據(jù), 而不是直接將整個(gè)store映射過去(使用方式如下)

connect高階函數(shù)接收兩個(gè)參數(shù):

參數(shù)一: 接收一個(gè)函數(shù)fn1, 要求fn1返回一個(gè)對(duì)象, 對(duì)象中存放要映射的數(shù)據(jù); 同時(shí)在回調(diào)fn1函數(shù)時(shí), 會(huì)將state傳到fn1中

映射到組件中的數(shù)據(jù)是通過this.props獲取的

import React, { PureComponent } from 'react'
import { connect } from 'react-redux'

export class About extends PureComponent {
  render() {
    // 在props中獲取到映射過來的數(shù)據(jù)
    const { counter } = this.props

    return (
      <div>
        <h2>About</h2>
        <h2>當(dāng)前計(jì)數(shù): {counter}</h2>
      </div>
    )
  }
}

// 回調(diào)mapStateToProps時(shí)會(huì)傳遞過來state
const mapStateToProps = (state) => ({
  // 表示將counter數(shù)據(jù)映射過去, 當(dāng)然還可以映射其他的數(shù)據(jù)
  counter: state.counter
})

// 表示將數(shù)據(jù)映射到About組件中
export default connect(mapStateToProps)(About)

參數(shù)二: 參數(shù)二也是接收一個(gè)參數(shù)fn2, 要求fn2也是返回一個(gè)對(duì)象, 對(duì)象中的屬性同樣會(huì)映射到props中去; 不同于fn1的是, 該對(duì)象中存放的全部都是函數(shù); 并且在回到時(shí)將dispatch傳入到fn2中

我們一般在參數(shù)二中映射的是dispatch派發(fā)action的操作文章來源地址http://www.zghlxwxcb.cn/news/detail-830019.html

import React, { PureComponent } from 'react'
import { connect } from 'react-redux'
import { changeNumAction } from '../store/actionCreators'

export class About extends PureComponent {
  changeNum(num) {
    // 調(diào)用映射到props的方法
    this.props.changeNumber(num)
  }

  render() {
    const { counter } = this.props

    return (
      <div>
        <h2>About</h2>
        <h2>當(dāng)前計(jì)數(shù): {counter}</h2>
        <button onClick={() => this.changeNum(10)}>+10</button>
        <button onClick={() => this.changeNum(-10)}>-10</button>
      </div>
    )
  }
}

const mapStateToProps = (state) => ({
  counter: state.counter
})

// 回調(diào)mapDispatchToProps時(shí)會(huì)傳遞過來dispatch
const mapDispatchToProps = (dispatch) => ({
  // 表示映射到組件props的方法
  changeNumber(num) {
    dispatch(changeNumAction(num))
  }
})

// 表示將數(shù)據(jù)映射到About組件中
export default connect(mapStateToProps, mapDispatchToProps)(About)

到了這里，關(guān)于React中使用Redux (二) - 通過react-redux庫(kù)連接React和Redux的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！