前言
上篇文章讲解了redux的基本使用方法，这篇文章通过小案例教大家如何在实际的react的项目中实现redux，加深对redux的理解和掌握，基础内容不清楚的可以看看上篇文章——》 Redux的基础用法详解（纯函数的概念）
项目中使用Redux
这里就新建项目然后使用redux完成一个小案例
首先新建项目然后删除掉冗余代码，之后在src文件夹下新建一个pages文件夹,在文件夹下新建一个alipay.js和wxpay.js,然后我们来实现一个这样的需求:
比如我们的微信和支付宝都绑定了同一张银行卡,当我们去使用支付宝或者微信支付的时候,对应的这个银行卡上的余额就会减少。也就是说支付宝和微信共享了银行卡的账户余额。
项目中要用到Redux，所以要先进行下载
npm i -D redux
在src目录下新建store文件夹,去写对应的内容
我们来捋一捋实现这个功能的思路，在微信和支付宝端余额显示相同。思路是建立一个文件夹叫store，index.js中是我们用来创建store的,然后建立一个action来放咱们的一些action,我们通过action来修改store,连接action和store的是我们的reducer 西,reducer是一个纯函数,
下面我们根据上篇文章的步骤来创建和使用store
store/index.js :
import {
createStore } from 'redux'
import reducer from './reducer'
const store = createStore(reducer)
export default store
新建canstance.js文件，在里面定义对应的方法：
export const INCREMENT = 'INCREMENT'
export const DECREMENT = 'DECREMENT'
export const ADD_NUMBER = 'ADD_NUMBER'
export const SUB_NUMBER = 'SUB_NUMBER'
然后创建action的内容，新建action文件：
import {
INCREMENT, DECREMENT, ADD_NUMBER, SUB_NUMBER } from './canstance'
export const incAction = num =>({
type: INCREMENT, num })
export const decAction = num =>({
type: DECREMENT, num })
export const addAction = num =>({
type: ADD_NUMBER, num })
export const subAction = num =>({
type: SUB_NUMBER, num })
最后新建reducer文件，建立store和action之间的联系：
import {
INCREMENT, DECREMENT, ADD_NUMBER, SUB_NUMBER } from './canstance'
const initState = {
money: 0
}
const reducer = (state=initState, action) => {
switch(action.type) {
case INCREMENT:
return {
...state, money: state.money + 1}
case DECREMENT:
return {
...state, money: state.money - 1}
case ADD_NUMBER:
return {
...state, money: state.money + action.num}
case SUB_NUMBER:
return {
...state, money: state.money - action.num}
default:
return state
}
}
export default reducer
最后来到开始创建的alipay.js和wxpay.js，这两个文件里面的内容大致相同，下面就举例说明一个
1.引入store.js
2.定义state状态，利用store.getState().money进行取值
3.在componentDidMount中进行值的更新
import React, {
PureComponent } from 'react'
import store from '../store'
import {
addAction, subAction } from '../store/action'
export class Alipay extends PureComponent {
state = {
money: store.getState().money
}
componentDidMount() {
store.subscribe(() => {
this.setState({
money: store.getState().money})
})
}
render() {
return (
<div>
<h1>支付宝</h1>
<h2>余额：{
this.state.money}</h2>
<button onClick={
e => this.decrement(1)}>付钱</button>
<button onClick={
e => this.makemoney(100)}>收钱</button>
</div>
)
}
decrement(num) {
store.dispatch(subAction(num))
}
makemoney(num) {
store.dispatch(addAction(num))
}
}
export default Alipay
查看最后实现的效果：
最后
好了本篇文章就到此结束了，在上一篇的基础上通过小例子讲解了在react项目中使用Redux的方法，如果有问题可以在评论区互相交流讨论呀~