在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