Redux案例-基于Ant Design React

最新推荐文章于 2024-09-09 09:54:48 发布
最新推荐文章于 2024-09-09 09:54:48 发布
阅读量620 收藏 1
点赞数
分类专栏： React.js 文章标签： javascript reactjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40826349/article/details/109062966
版权
1.Ant Design介绍和环境初始化

Ant Design是一套面向企业级开发的UI框架，视觉和动效作的很好。阿里开源的一套UI框架，它不只支持React，还有ng和Vue的版本，我认为不论你的前端框架用什么，Ant Design都是一个不错的选择。习惯性把AntDesign简称为antd。

官网地址:https://ant.design/index-cn

2.项目初始化
#安装脚手架工具
cnpm install -g create-react-app
create-react-app demo05-redux
cd demo05-redux
yarn start
3.生成基本代码结构

删除src下所有文件，创建index.js。

import React from "react";
import ReactDOM from 'react-dom'
import App from './App'

ReactDOM.render(<App/>,document.getElementById('root'))

创建App.js。

import React, {Component} from "react";

class App extends Component {
    render() {
        return (
            <div>Hello World</div>
        )
    }
}

export default App;
3.安装Ant Design
cnpm install antd --save
#或
yarn add antd
4.使用Ant Design制作基础UI界面

引入CSS样式

import 'antd/dist/antd.css'

编写Input框和Button按钮

import React, {Component} from "react";
import 'antd/dist/antd.css'
import {Input,Button} from "antd";//需要什么组件，引入什么组件

class App extends Component {
    render() {
        return (
            <div>
                <div>
                    <Input placeholder={'karma'} style={{ width:'250px'}}/>
                    <Button type="primary">添加</Button>
                </div>
            </div>
        )
    }
}

export default App;

添加List列表，首先我们需要在class外声明一个data数组

const data=[
    'test1',
    'test2',
    'test3'
]

再在App.js中，引入List组件。

import {Input,Button,List} from "antd";//需要什么组件，引入什么组件

添加List组件。

import React, {Component} from "react";
import 'antd/dist/antd.css'
import {Input, Button, List} from "antd";//需要什么，引入什么

const data = [
    'test1',
    'test2',
    'test3'
]

class App extends Component {
    render() {
        return (
            <div>
                <div>
                    <Input placeholder={'karma'} style={{width: '250px'}}/>
                    <Button type="primary">添加</Button>
                </div>
                {/*主要代码*/}
                <div>
                    <List
                        bordered
                        dataSource={data}
                        renderItem={item => (<List.Item>{item}</List.Item>)}
                    ></List>
                </div>
                {/*主要代码*/}
            </div>
        )
    }
}

export default App;
5.创建Redux中的仓库-store和reducer

首先需要先安装Redux。

cnpm install --save redux

再在src目录下创建store目录，在store目录下创建index.js。

import { createStore } from 'redux'  // 引入createStore方法
const store = createStore()          // 创建数据存储仓库
export default store                 //暴露出去

再创建reducer.js在store目录下。

const defaultState = {}  //默认数据
export default (state = defaultState,action)=>{  //就是一个方法函数
  //state: 是整个项目中需要管理的数据信息,这里我们没有什么数据，所以用默认空的来表示。
    return state
}

最后在store/index.js中引入reducer，再将reducer以参数的形式传递给createStore方法。

import {createStore} from "redux";
import reducer from "./reducer";
const store =createStore(reducer);
export default store;

仓库store和reducer都创建好了，可以初始化下App.js中的数据了，在reducer.js文件的defaultState对象中，加入两个属性:inputValue和list。

const defaultState = {
    inputValue: 'karma',
    list: [
        'test1',
        'test2',
        'test3'
    ]
}  //默认数据

让App.js组件获取到store中初始化的数据，在组件引入store。

import store from './store'
#或者
import store from './store/index'

再在组件的构造函数中获取到数据，将它赋值给组件的state，最后再将数据进行渲染。

import React, {Component} from "react";
import 'antd/dist/antd.css'
import {Input, Button, List} from "antd";//需要什么，引入什么
import store from "./store";

class App extends Component {
    // 主要代码
    constructor(props) {
        super(props);
        this.state=store.getState();
    }
    // 主要代码
    render() {
        return (
            <div>
                <div>
                    <Input placeholder={'karma'} style={{width: '250px'}}/>
                    <Button type="primary">添加</Button>
                </div>
                <div>
                    {/*主要代码*/}
                    <List
                        bordered
                        dataSource={this.state.list}
                        renderItem={item => (<List.Item>{item}</List.Item>)}
                    ></List>
                    {/*主要代码*/}
                </div>
            </div>
        )
    }
}
export default App;
6.通过Input体验Redux的流程

给Input添加onChange时间，并在构造函数中进行bind绑定。

##创建inputChange方法
changeInputValue(e){
    console.log(e.target.value)
}

##Input添加onChange事件,并再添加一个Input框，用来获取到第一个Input值的变化情况
<Input placeholder={'karma'} style={{width: '250px'}} onChange={this.inputChange}/>
<Input value={this.state.inputValue} style={{width: '250px'}} onChange={this.inputChange}/>
##构造函数中，进行绑定
this.inputChange=this.inputChange.bind(this)

在changeInputValue方法中，创建Action交互动作。

inputChange(e) {
  const action = {
    type: 'inputChange',
    ##获取到Input框的值
    value: e.target.value
  }
  ##通过dispatch传递到store中
  store.dispatch(action)
}

然后在reducer.js中进行数据改变操作。

export default (state = defaultState, action) => {  //就是一个方法函数
    //state: 是整个项目中需要管理的数据信息,这里我们没有什么数据，所以用默认的来表示。
    if (action.type==='inputChange'){
      	//Reducer里只能接收state，不能改变state,所以我们进行深度拷贝
        let newState=JSON.parse(JSON.stringify(state))//深度拷贝
        newState.inputValue=action.value
        return newState
    }
    return state
}

记住：Reducer里只能接收state，不能改变state。

接着我们需要使得组件发生更新，我们需要在App组件构造函数中添加store订阅。

    
constructor(props) {
  super(props);
  this.state = store.getState();
  this.inputChange = this.inputChange.bind(this)
  // 主要代码
  this.storeChange = this.storeChange.bind(this)
  store.subscribe(this.storeChange)
  // 主要代码
}

##并添加storeChange方法，进行重新setState更新组件数据
storeChange() {
  this.setState(store.getState())
}

然后我们在浏览器第一个Input框中输入值，第二个Input也随着变化。

7.添加Button响应事件

首先我们给Button添加onClick点击事件，并在构造函数中进行绑定。

<Input value={this.state.inputValue} style={{width: '250px'}} onChange={this.inputChange}/>
<Button type="primary" onClick={this.addItem}>添加</Button>

##构造函数中添加绑定
this.addItem = this.addItem.bind(this)

##添加addItem方法，创建action，并通过dispatch将操作传递给store
addItem() {
  const action = {
    type: 'addItem'
  }
  store.dispatch(action)
}

然后我们在reducer.js进行list数据添加操作。

export default (state = defaultState, action) => {  //就是一个方法函数
    //state: 是整个项目中需要管理的数据信息,这里我们没有什么数据，所以用默认的来表示。
    if (action.type === 'inputChange') {
        let newState = JSON.parse(JSON.stringify(state))//深度拷贝
        newState.inputValue = action.value
        return newState
    }
    if (action.type === 'addItem') {
        let newState = JSON.parse(JSON.stringify(state))//深度拷贝
        newState.list.push(newState.inputValue)
        newState.inputValue = ''
        return newState
    }
    return state
}

最后我们就可以点击Button按钮进行List数据添加。

8.通过Redux进行List的删除

首先，我们需要给List子项绑定onClick事件，并传递下标进行绑定。

<List
    bordered
    dataSource={this.state.list}
    renderItem={(item, index) => (
               <List.Item onClick={this.itemChange.bind(this, index)}>{item}</List.Item>)}></List>
      
##添加删除方法，将action操作通过dispatch传递到store中
    deleteItem(index) {
      const action = {
        type: 'deleteItem',
        index
      }
      store.dispatch(action)
    }

再在reducer.js中，进行数据删除操作更新。

if (action.type === 'deleteItem') {
  let newState = JSON.parse(JSON.stringify(state))//深度拷贝
  newState.list.splice(action.index, 1)
  return newState
}

然后在浏览器中，我们就可以点击item子项，进行List数据删除。

9.把Action Type单独创建一个js文件管理
#创建store/actionTypes.js
export const CHANGE_INPUT='changeInput'
export const ADD_INFO='addInfo'
export const DELETE_ITEM='deleteItem'
export const GET_LIST='getList'

引入Action中使用

#actionTypes.js
import {CHANGE_INPUT, ADD_INFO, DELETE_ITEM} from './store/actionTypes'

changeInput(e) {
  const action = {
    type: CHANGE_INPUT,
    value: e.target.value
  }
  store.dispatch(action)
}

clickBtn() {
  const action = {
    type: ADD_INFO
  }
  store.dispatch(action)
}

deleteItem(index) {
  const action = {
    type: DELETE_ITEM,
    index
  }
  store.dispatch(action)
}

引入Reducer并进行更改

#reducer.js
import {CHANGE_INPUT, ADD_INFO, DELETE_ITEM} from './actionTypes'

if (action.type === CHANGE_INPUT) {
  let newState = JSON.parse(JSON.stringify(state))//深度拷贝state
  newState.inputValue = action.value
  return newState
}
if (action.type === ADD_INFO) {
  let newState = JSON.parse(JSON.stringify(state))//深度拷贝state
  newState.list.push(newState.inputValue)
  newState.inputValue = ''
  return newState
}
if (action.type === DELETE_ITEM) {
  let newState = JSON.parse(JSON.stringify(state))//深度拷贝state
  newState.list.splice(action.index, 1)
  return newState;
}
10.编写actionCreators.js

为了让action方便统一管理，使得代码更加简洁。

#actionCreators.js
import {CHANGE_INPUT, ADD_INFO, DELETE_ITEM, GET_LIST} from './actionTypes'

export const changeInput = (value) => ({
    type: CHANGE_INPUT,
    value
})

export const clickBtn = () => ({
    type: ADD_INFO
})

export const deleteItem = (index) => ({
    type: DELETE_ITEM,
    index
})

在App.js中引入action常量方法

#App.js
import {changeInput, clickBtn, deleteItem} from './store/actionCreators'

#方法修改
changeInput(e) {
  store.dispatch(changeInput(e.target.value))
}

clickBtn() {
  store.dispatch(clickBtn())
}

deleteItem(index) {
  store.dispatch(deleteItem(index))
}
11.Redux所遇到的坑
  • store必须是唯一的，多个store是坚决不允许，只能有一个store空间
  • 只有store能改变自己的内容，Reducer不能改变
  • Reducer必须是纯函数
12.组建UI和业务拆分

拆分UI组件，首先我们先创建一个AppUI.js文件，将App.js中的JSX部分代码复制过来，并引入所需的相关组件

import React, {Component} from "react";
import 'antd/dist/antd.css'
import { Input , Button , List } from 'antd'
class AppUI extends Component {
    render() {
        return (
             <div style={{margin: '10px'}}>
                <div>
                    <Input style={{width: '250px', marginRight: '10px'}}
                           onChange={this.changeInput} value={this.state.inputValue}/>
                    <Button type={"primary"} onClick={this.clickBtn}>添加</Button>
                </div>
                <div>
                    <List
                        bordered
                        dataSource={this.state.list}
                        renderItem={(item, index) => (
                            <List.Item onClick={this.deleteItem.bind(this, index)}>{item}</List.Item>
                        )}
                    />
                </div>
            </div>
        )
    }
}

export default AppUI;

修改App.js文件

#引入AppUI组件
import AppUI from "./AppUI";

#并修改JSX部分代码
render() { 
    return ( 
        <AppUI />
    );
}
UI组件和业务逻辑组件整合
#App.js

constructor(props) {
  super(props);
  this.state = store.getState();
  this.changeInput = this.changeInput.bind(this)
  this.clickBtn = this.clickBtn.bind(this)
  #需要在constructor(构造函数里)对deleteItem方法进行重新绑定this
  this.deleteItem = this.deleteItem.bind(this)
  this.storeChange = this.storeChange.bind(this)
  store.subscribe(this.storeChange)
}
render() {
  return (
    <AppUI
    changeInput={this.changeInput}
		inputValue={this.state.inputValue}
		clickBtn={this.clickBtn}
		list={this.state.list}
		deleteItem={this.deleteItem}
/>
  );
}

#AppUI.js
import React, {Component} from "react";
import {Button, Input, List} from "antd";
import 'antd/dist/antd.css'
class AppUI extends Component {
    render() {
        return (
            <div style={{margin: '10px'}}>
                <div>
                    <Input style={{width: '250px', marginRight: '10px'}}
                           onChange={this.props.changeInput} value={this.props.inputValue}/>
                    <Button type={"primary"} onClick={this.props.clickBtn}>添加</Button>
                </div>
                <div>
                    <List
                        bordered
                        dataSource={this.props.list}
                        renderItem={(item, index) => (
                            <List.Item onClick={() => this.props.deleteItem(index)}>{item}</List.Item>
                        )}
                    />
                </div>
            </div>
        )
    }
}

export default AppUI;

需要注意的是在List组件的删除功能,需要用箭头函数的形式，代替以前方法，并在箭头函数里使用属性的方法，调用出啊你过来的方法。

<List
    bordered
    dataSource={this.props.list}
    renderItem={(item,index)=>(<List.Item onClick={()=>{this.props.deleteItem(index)}}>{item}</List.Item>)}
/>
13.Redux中的无状态组件
  1. 首先我们不在需要引入React中的{ Component }，删除就好。
  2. 然后些一个TodoListUI函数,里边只返回JSX的部分就好，这步可以复制。
  3. 函数传递一个props参数，之后修改里边的所有props，去掉this。
import React from "react";
import {Button, Input, List} from "antd";
import 'antd/dist/antd.css'

const AppUI = (props) => {
    return (
        <div style={{margin: '10px'}}>
            <div>
                <Input style={{width: '250px', marginRight: '10px'}}
                       onChange={props.changeInput} value={props.inputValue}/>
                <Button type={"primary"} onClick={props.clickBtn}>添加</Button>
            </div>
            <div>
                <List
                    bordered
                    dataSource={props.list}
                    renderItem={(item, index) => (
                        <List.Item onClick={() => props.deleteItem(index)}>{item}</List.Item>
                    )}
                />
            </div>
        </div>
    )
}

export default AppUI;
14.Axios异步获取list数据

利用easy-mock模拟数据

https://www.easy-mock.com/mock/5f96cc6134c55d14fda96ea1/example/query

#自定义返回数据格式
{
  "success": true,
  "data": {
    "list": [
      "test1",
      "test2",
      "test3"
    ]
  }
}

安装并使用Axios

cnpm install --save axios

在App.js中引入axios，并在组件中声明周期函数

import axios from 'axios'

#声明周期函数 componentDidMount
componentDidMount(){
    axios.get('https://www.easy-mock.com/mock/5f96cc6134c55d14fda96ea1/example/query').then((res)=>{
        console.log(res)
    })
}

将数据渲染传递给list，首先我们需要在store/actionCreators.js文件中，引入action常量，创建一个新的函数，

#actionTypes.js
export const GET_LIST='getList'

#actionCreators.js
import {GET_LIST} from './actionTypes'
export const getList = (list) => ({
    type: GET_LIST,
    list
})

然后在App.js中引入函数，并将数据通过store.dispatch传递list值

import {getList} from './store/actionCreators'

componentDidMount() {
  Axios.get('https://www.easy-mock.com/mock/5f96cc6134c55d14fda96ea1/example/query').then((res) => {
    console.log(res)
    store.dispatch(getList(res.data.data.list))
  })
}

最后在reducer.js中将值赋给list

#引入action常量
import {GET_LIST} from './actionTypes'

#创建action事件
if (action.type === GET_LIST) {
  let newState = JSON.parse(JSON.stringify(state))//深度拷贝statec
  newState.list=action.list
  return newState;
}

个人博客：Karma‘s Blog
源码地址：传送门

仲尼叔叔
关注
专栏目录
ant design 组件案例
08-04
antd 漂亮的组件应用，需要先安装 React,React-dom ，ant design 等组件
管理系统系列--基于 Ant Design React 的管理系统架构.zip
02-25
在本项目中，“管理系统系列--基于 Ant Design React 的管理系统架构.zip”是一个压缩包，它包含了一个使用 Ant Design 和 React 框架构建的管理系统的源代码。Ant Design 是一个流行的 UI 设计语言和组件库，专门...
React Redux Ant Design 项目教程
最新发布
gitblog_00751的博客
09-09 736
React Redux Ant Design 项目教程 react-redux-antdReact & Redux & Ant.Design项目地址:https://gitcode.com/gh_mirrors/rea/react-redux-antd 1. 项目介绍 react-redux-antd 是一个基于 React、Redux 和 Ant Design 的开源项目，旨在为开发企业级应...
React-class——Redux、ant Design
qq_52301431的博客
10-13 671
在标准的MVC框架中，数据可以在UI组件和存储之间双向流动，而Redux严格限制了数据只能在一个方向上流动。2.2、action用于对state 进行更新处理，表示要执行的动作，通过dispatch(action)触发；store.subscribe(componentMethods)：订阅store的修改，只要store发生改变，组件中的回调函数就会被执行；store.dispatch(action)：用于派发action，触发reducer,执行修改动作；eg--结束的时候，跟图书管理员说的话；
ant design 项目实例
JIANLI0123的博客
12-03 1161
安装 Umi UI | 创建新应用 参考官网 第一步：新建路由 创建路由： umi g page products 目录src/pages中会添加products.js和products.css两个文件 第二步：编写 UI Component 在编辑器中打开，新建src/components/ProductList.js文件 import { Table, Popconfirm, Butt...
redux在react中的应用，使用antdDesign完成购物车
qq_35191010的博客
03-28 455
redux在react中使用antdDesign完成购物车的加减
react项目中使用redux的简单案例
weixin_44801790的博客
08-17 243
react项目中使用redux
react-admin：基于React + ant-design的用于后台管理项目的脚手架
02-05
react + redux + react-router + ant-design +不可变+获取 redux-action + redux-logger 类名+ lodash ass webpack2 + react-hot-loader 埃斯林特 实现的功能 热加载 ES6 / 7 动态路由 动作日志打印 配置生成...
react-ant-admin：使用ant-design react react-hook ts开发的类ant-design-pro管理后台，具有完整的权限系统和配套的node + ts的api
02-05
redux之外，还包含了umi ， dva ， ant-design/pro-layout等其他东西，当这些概念和ts结合起来使用的时候，我瞬间感觉无处下手，后面又仔细了阅读了权限设计，菜单栏渲染部分的代码，我重新定义了， Ant Desig
基于React18、React-Router V6、Redux Vite2、Ant-Design 开源的一套后台管理框架
11-04
Hooks Admin 是一个全面的后台管理框架，它充分利用了React18、React-Router V6、Redux、React Hooks、TypeScript以及Vite2等现代前端技术，同时采用了流行的Ant Design UI库，为开发者提供了高效且易用的开发环境。...
react+ant design实现Table的增、删、改的示例代码
10-17
主要介绍了react+ant design实现Table的增、删、改的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
react+redux+router完整实践项目案例源码
08-11
一个使用react的项目，代码是全的，有整个react的开发流程
react-typescript-react-router-redux-antDesign-demo：React + typescript + react-router + redux + antDesign项目构建
02-20
它在生产模式下正确捆绑了React，并优化了构建以获得最佳性能。 最小化构建，文件名包含哈希。 您的应用已准备好进行部署！ 有关更多信息，请参见有关的部分。 npm run eject或yarn eject 注意：这是单向操作。 ...
Redux-form嵌套到实际项目开发案例三
水痕
04-07 1425
一、运行本项目案例直接把代码拷贝到案例一中的components文件夹下二、新建一个文件src/component/SimpleForm2.js文件'use strict'; import React,{Component} from 'react' import {Field, reduxForm} from 'redux-form'class SimpleForm2 extends Compon
一个使用ant design和reactjs创建的示例工程
xgbm_k的专栏
02-12 1494
这几天用create-react-app创建了一个reactjs示例工程：https://github.com/Kenneth111/antd-admin。里面主要用到了react, ant design, react-router-dom, redux。示例比较简单，初学者可以看看入下门。
ReactJS React+Redux+Router+antDesign通用高效率开发模板，夜间模式为例
weixin_30920853的博客
03-14 161
工作比较忙，一直没有时间总结下最近学习的一些东西，为了方便前端开发，我使用React+Redux+Router+antDesign总结了一个通用的模板，这个技术栈在前端开发者中是非常常见的。 总的来说，我这个工程十分便捷，对于初学者来说，可能包含到以下的一些知识点： 一、React-Router的使用 Router是为了方便管理组件的路径，它使用比较简单，一般定义如下就行，需要注意的是...
React 项目实战 --- React + Redux + Ant Design +TypeScript
weixin_50983325的博客
06-07 895
拉钩电商项目说明 1. 技术栈 1.1 客户端 脚本：TypeScript 前端框架：React 路由管理：React-router-dom 用户界面：Antd 全局状态管理：Redux 异步状态更新：redux-saga 路由状态同步：connected-react-router 网络请求：Axios 调试工具：redux-devtools-extension 1.2 服务端 脚本：Node.js 数据库：Mongodb 数据库可视化：Robo 3T 2. 搭建开发环境 (服务端) 2.1 安装
Redux学习之旅一：Ant Design
muAluo的博客
11-11 192
一、安装 npm install antd --save
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值