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

ゝ一纸荒年。 2023-10-02 20:58 36阅读 0赞

### 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的按钮;

![在这里插入图片描述][1eaec0bee09f44cd94a5b820450c2222.png_pic_center]

**首先将结构搭建出来, 然后安装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组件中的代码是大同小异的, 所以这不是我们最终编写的代码, 后面还会对代码进行优化**

[1eaec0bee09f44cd94a5b820450c2222.png_pic_center]: https://img-blog.csdnimg.cn/1eaec0bee09f44cd94a5b820450c2222.png#pic_center