React利用Redux的操作是怎样的

在这篇文章中我们来了解一下“React使用Redux的操作是怎样的？”，一些朋友可能会遇到这方面的问题，对此在下文小编向大家来讲解，内容详细，易于理解，希望大家阅读完这篇能有收获哦，有需要的朋友就往下看吧！

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组件中的代码是大同小异的, 所以这不是我们最终编写的代码, 后面还会对代码进行优化。

（编辑：银川站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!