foreword
The last article explained the basic use of redux. This article teaches you how to implement redux in actual react projects through small cases, and deepen your understanding and mastery of redux. If the basic content is unclear, you can read the previous article— —" Detailed explanation of the basic usage of Redux (the concept of pure function)
Using Redux in the project
Here we will create a new project and then use redux to complete a small case.
First, create a new project and delete redundant code. Then create a pages folder under the src folder, create a new alipay.js and wxpay.js under the folder, and then let's Implement a requirement like this:
For example, both our WeChat and Alipay are bound to the same bank card. When we use Alipay or WeChat to pay, the balance on the corresponding bank card will decrease. That is to say, Alipay and WeChat share the account balance of the bank card.
Redux is used in the project, so download it first
npm i -D redux
Create a new store folder in the src directory and write the corresponding content
Let's take a look at the idea of implementing this function. The balance display on WeChat and Alipay is the same. The idea is to create a folder called store, which we use to create the store in index.js, and then create an action to put some of our actions. We modify the store through actions, and our reducer is what connects the action and the store. reducer is a pure function,
Let's create and use store store/index.js according to the steps of the previous article :
import {
createStore } from 'redux'
import reducer from './reducer'
const store = createStore(reducer)
export default store
Create a new instance.js file and define the corresponding method in it:
export const INCREMENT = 'INCREMENT'
export const DECREMENT = 'DECREMENT'
export const ADD_NUMBER = 'ADD_NUMBER'
export const SUB_NUMBER = 'SUB_NUMBER'
Then create the content of the action and create a new action file:
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 })
Finally, create a new reducer file to establish the connection between store and 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
Finally, I came to the alipay.js and wxpay.js that were created at the beginning. The contents of these two files are roughly the same. The following is an example to illustrate a
1. Introduce store.js
2. Define the state state, use store.getState().money to carry out Value
3. Update the value in 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
Check out the final result:
At last
Well, this is the end of this article. On the basis of the previous article, I explained the method of using Redux in the react project with a small example. If you have any questions, you can exchange and discuss with each other in the comment area~