在react项目实战中使用Redux（案例讲解）

前言

上篇文章讲解了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的方法，如果有问题可以在评论区互相交流讨论呀~