欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

如何在React中直接使用Redux

 更新時(shí)間:2022年11月03日 10:51:08   作者:藍(lán)桉cyq  
這篇文章主要介紹了如何在React中直接使用Redux,目前redux在react中使用是最多的,所以我們需要將之前編寫的redux代碼,融入到react當(dāng)中去,本文給大家詳細(xì)講解,需要的朋友可以參考下

React中使用Redux

開始之前需要強(qiáng)調(diào)一下,redux和react沒有直接的關(guān)系,你完全可以在React, Angular, Ember, jQuery, or vanilla JavaScript中使用Redux。

盡管這樣說,redux依然是和React庫結(jié)合的更好,因?yàn)樗麄兪峭ㄟ^state函數(shù)來描述界面的狀態(tài),Redux可以發(fā)射狀態(tài)的更新, 讓他們作出相應(yīng); 目前redux在react中使用是最多的,所以我們需要將之前編寫的redux代碼,融入到react當(dāng)中去。

這里我創(chuàng)建了兩個(gè)組件:

Home組件:其中會(huì)展示當(dāng)前的counter值,并且有一個(gè)+1和+5的按鈕;

Profile組件:其中會(huì)展示當(dāng)前的counter值,并且有一個(gè)-1和-5的按鈕;

在這里插入圖片描述

首先將結(jié)構(gòu)搭建出來, 然后安裝redux庫: npm i redux

安裝完成后, 安裝我們上一篇文章講解的目錄結(jié)構(gòu), 創(chuàng)建Store文件夾

store/index.js 中創(chuàng)建store

import { createStore } from "redux";
import reducer from "./reducer";

const store = createStore(reducer)

export default store

store/constants.js 中定義變量

export const CHANGE_NUM  = "change_num"

store/reducer.js

import { CHANGE_NUM } from "./constants"

const initialState = {
  counter: 10
}

export default function reducer(state = initialState, action) {
  switch(action.type) {
    case CHANGE_NUM:
      return {...state, counter: state.counter + action.num}
    default: 
      return state
  }
}

store/actionCreators.js

import { CHANGE_NUM } from "./constants"

export const changeNumAction = (num) => ({
  type: CHANGE_NUM,
  num
})

store中編寫完成后, 在Home和Profile頁面中使用store中的state, 核心代碼主要是兩個(gè):

在 componentDidMount 中監(jiān)聽store的變化,當(dāng)數(shù)據(jù)發(fā)生變化時(shí)重新設(shè)置 counter;

在發(fā)生點(diǎn)擊事件時(shí),調(diào)用store的dispatch來派發(fā)對(duì)應(yīng)的action;

Home組件

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

export class Home extends PureComponent {
  constructor() {
    super()

    this.state = {
      counter: store.getState().counter
    }
  }

  // 核心一: 在componentDidMount中監(jiān)聽store的變化,當(dāng)數(shù)據(jù)發(fā)生變化時(shí)重新設(shè)置 counter;
  componentDidMount() {
    store.subscribe(() => {
      const state = store.getState()
      this.setState({ counter: state.counter })
    })
  }

  // 核心二: 在發(fā)生點(diǎn)擊事件時(shí),調(diào)用store的dispatch來派發(fā)對(duì)應(yīng)的action;
  changeNum(num) {
    store.dispatch(changeNumAction(num))
  }

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

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

export default Home

Profile組件

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

export class Profile extends PureComponent {
  constructor() {
    super()

    this.state = {
      counter: store.getState().counter
    }
  }

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

  changeNum(num) {
    store.dispatch(changeNumAction(num))
  }

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

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

export default Profile

我們發(fā)現(xiàn)Home組件和Profile組件中的代碼是大同小異的, 所以這不是我們最終編寫的代碼, 后面還會(huì)對(duì)代碼進(jìn)行優(yōu)化。

到此這篇關(guān)于在React中直接使用Redux的文章就介紹到這了,更多相關(guān)React使用Redux內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • ahooks控制時(shí)機(jī)的hook實(shí)現(xiàn)方法

    ahooks控制時(shí)機(jī)的hook實(shí)現(xiàn)方法

    這篇文章主要為大家介紹了ahooks控制時(shí)機(jī)的hook實(shí)現(xiàn)方法示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-07-07
  • react項(xiàng)目如何運(yùn)行在微信公眾號(hào)

    react項(xiàng)目如何運(yùn)行在微信公眾號(hào)

    這篇文章主要介紹了react項(xiàng)目如何運(yùn)行在微信公眾號(hào),幫助大家更好的理解和學(xué)習(xí)使用react,感興趣的朋友可以了解下
    2021-04-04
  • react navigation中點(diǎn)擊底部tab怎么傳遞參數(shù)

    react navigation中點(diǎn)擊底部tab怎么傳遞參數(shù)

    本文主要介紹了react navigation中點(diǎn)擊底部tab怎么傳遞參數(shù),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-04-04
  • React useCallback詳細(xì)使用教程

    React useCallback詳細(xì)使用教程

    useCallback是react中比較重要的一個(gè)hook,useCallback 用來返回一個(gè)函數(shù),在父子組件傳參或者通用函數(shù)封裝中,起到舉足輕重的作用
    2022-11-11
  • react函數(shù)組件useState異步,數(shù)據(jù)不能及時(shí)獲取到的問題

    react函數(shù)組件useState異步,數(shù)據(jù)不能及時(shí)獲取到的問題

    這篇文章主要介紹了react函數(shù)組件useState異步,數(shù)據(jù)不能及時(shí)獲取到的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-08-08
  • 用React實(shí)現(xiàn)一個(gè)簡單的虛擬列表

    用React實(shí)現(xiàn)一個(gè)簡單的虛擬列表

    虛擬列表是現(xiàn)在比較常用的前端渲染大數(shù)據(jù)列表的方案,目前也有很多組件庫和工具庫也都有對(duì)應(yīng)的實(shí)現(xiàn),本文將給大家介紹一下如何用React實(shí)現(xiàn)一個(gè)簡單的虛擬列表,文中通過代碼示例講解的非常詳細(xì),需要的朋友可以參考下
    2023-12-12
  • 老生常談js-react組件生命周期

    老生常談js-react組件生命周期

    下面小編就為大家?guī)硪黄仙U刯s-react組件生命周期。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2017-05-05
  • react?表單數(shù)據(jù)形式配置化設(shè)計(jì)

    react?表單數(shù)據(jù)形式配置化設(shè)計(jì)

    這篇文章主要介紹了react表單數(shù)據(jù)形式配置化設(shè)計(jì),文章圍繞主題展開詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值,需要的朋友可以參考一下
    2022-07-07
  • 利用React-router+Webpack快速構(gòu)建react程序

    利用React-router+Webpack快速構(gòu)建react程序

    目前 React、Webpack 等技術(shù)如火如荼,你是不是還在愁苦如何把這些雜亂的知識(shí)怎么學(xué)習(xí)一下,開啟一段新的前端開發(fā)之路呢?那么這篇將給大家運(yùn)用示例代碼詳細(xì)的介紹使用React-router和Webpack如何快速構(gòu)建一個(gè)react程序,感興趣的朋友們下面來一起看看吧。
    2016-10-10
  • React技巧之中斷map循環(huán)的方法詳解

    React技巧之中斷map循環(huán)的方法詳解

    這篇文章主要和大家來分享一下React的技巧之如何中斷map循環(huán),文中的示例代碼講解詳細(xì),具有一定的學(xué)習(xí)價(jià)值,感興趣的小伙伴可以了解一下
    2023-06-06

最新評(píng)論