日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學(xué)無先后，達(dá)者為師

網(wǎng)站首頁 編程語言 正文

如何在React中直接使用Redux_React

作者：藍(lán)桉cyq ? 更新時(shí)間： 2022-12-05 編程語言

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ā)對應(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ā)對應(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ì)對代碼進(jìn)行優(yōu)化。

原文鏈接：https://blog.csdn.net/m0_71485750/article/details/126747191

欄目分類
最近更新