您当前的位置: 首页 > 技术文章 > 前端开发

React中使用Redux (一) - 在React中直接使用Redux

作者: 时间:2022-10-19阅读数:人阅读

React中使用Redux

开始之前需要强调一下,redux和react没有直接的关系,你完全可以在React, Angular, Ember, jQuery, or vanilla JavaScript中使用Redux

尽管这样说,redux依然是和React库结合的更好,因为他们是通过state函数来描述界面的状态,Redux可以发射状态的更新, 让他们作出相应; 目前redux在react中使用是最多的,所以我们需要将之前编写的redux代码,融入到react当中去。

这里我创建了两个组件:

Home组件:其中会展示当前的counter值,并且有一个+1和+5的按钮;

Profile组件:其中会展示当前的counter值,并且有一个-1和-5的按钮;

在这里插入图片描述

首先将结构搭建出来, 然后安装redux库: npm i redux

安装完成后, 安装我们上一篇文章讲解的目录结构, 创建Store文件夹

store/index.js 中创建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, 核心代码主要是两个:

在 componentDidMount 中监听store的变化,当数据发生变化时重新设置 counter;

在发生点击事件时,调用store的dispatch来派发对应的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中监听store的变化,当数据发生变化时重新设置 counter;
  componentDidMount() {
    store.subscribe(() => {
      const state = store.getState()
      this.setState({ counter: state.counter })
    })
  }

  // 核心二: 在发生点击事件时,调用store的dispatch来派发对应的action;
  changeNum(num) {
    store.dispatch(changeNumAction(num))
  }

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

    return (
      <div>
        <h2>Home</h2>
        <h2>当前计数: {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>当前计数: {counter}</h2>
        <button onClick={() => this.changeNum(-1)}>-1</button>
        <button onClick={() => this.changeNum(-5)}>-5</button>
      </div>
    )
  }
}

export default Profile

我们发现Home组件和Profile组件中的代码是大同小异的, 所以这不是我们最终编写的代码, 后面还会对代码进行优化

本站所有文章、数据、图片均来自互联网,一切版权均归源网站或源作者所有。

如果侵犯了你的权益请来信告知我们删除。邮箱:licqi@yunshuaiweb.com

加载中~
如果您对我们的成果表示认同并且觉得对你有所帮助可以给我们捐赠。您的帮助是对我们最大的支持和动力!
捐赠我们
扫码支持 扫码支持
扫码捐赠,你说多少就多少
2
5
10
20
50
自定义
您当前余额:元
支付宝
微信
余额

打开支付宝扫一扫,即可进行扫码捐赠哦

打开微信扫一扫,即可进行扫码捐赠哦

打开QQ钱包扫一扫,即可进行扫码捐赠哦