react 地区筛选_React 与 Redux 实践 —— 城市筛选面板
Redux 是 状态容器 ,提供 可预测化 的状态
要点
应用中所有的 state 都以一个对象树的形式存储在一个单一的 store 中;
唯一改变 store 的办法是触发 action,一个描述发生什么的对象;
为了描述 action 如何改变 state 树,你需要编写 reducers;
为了
所以,关于组件部分,明智的做法是在最外层上使用 Redux ,然后通过 Props 方式传值给内部子组件,使得components UI组件仅仅是 pure render (纯展示)
containers 与 components 区别对比
containers(容器组件)
components(UI组件)
Lo
最顶层,路由处理
中间和子组件
与Redux联系
是
否
读取数据
从 Redux 获取 state
从 props 获取数据
修改数据
从 Redux 派发 action
从 props 调用回调函数
例子
通过一个城市筛选面板来理解 React + Redux 的使用
示例demo:
编写 React 应用的时候,会有一个大致的
构建应用状态树 state 结构
编写 action (描述已发生事件的普通对象,所有修改 state 的操作都必须通过触发action)
编写 reducers (描述 action 如何改变 state tree)
编写 UI组件 components (纯组件,无状态,所有
编写 容器组件 containers (用来负责管理数据和业务逻辑,react-redux 链接components)
通过 createStore 创建store,通过 Prov
定好 state tree 后,编写actions
actions.
/**
* citypanel actions
*/
export const SET_VISIBILITY_FILTER = 'SET_VISIBILITY_FILTER';
export functionsetVisibilityFilter(filter){
return { type: SET_VISIBILITY_FILTER, filter }
}
Reducers
当应用很大时,可以将它拆成多个小的 reducers,分别独立地操作 state tree 的不同部分,因为 reducer 只是函数,你可以控制它们被调用的顺序,传入附加数据,甚至编写可复用的 reducer 来处理一些通用任务,如
reducer 和 action 是好基友
./reducers/cityList.jsx
import { SET_VISIBILITY_FILTER } from '../../actions/citypanel/actions';
import { cityData } from './cityData.js';
const initialState = cityData.filter(item=> item['citynum'])
console.log(initialState)
export default functioncityList(state = initialState, action){
switch (action.type) {
case SET_VISIBILITY_FILTER:
return cityFilter(action.filter)
default:
return state
}
}
functioncityFilter(filter){
return cityData.
./reducers/index.jsx 组合所有reducers (多个的时候用)
import { combineReducers } from 'redux'
import cityList from './cityList'
//使用redux的combineReducers方法将所有reducer打包起来
const
UI组件components
宗旨就是 pure function
./components/cityList.jsx
import React from 'react';
export default ({cityList = []}) => {
return (
{
cityList.map((city,index) => {
if(city){
return
./components/letterFilter.jsx
import React from 'react';
export default ({onFilterChange}) => {
// let letterArr = new Array(26);
// for (var i = 0; i < 26; i++) {
// letterArr[i]=String.fromCharCode((65 + i));
// }
// console.log(letterArr)
let letterArr=['特大','A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
return (
{
letterArr.map((letter,i) => {
return
{ onFilterChange(letter) }}>{letter}
})
}
);
}
外层组件组合letterFilter与cityList子组件, ./components/index.jsx
//此处的函数参数cityList与setVisibilityFilter是由容器组件传输
import React from 'react';
import LetterFilter from './letterFilter';
import CityList from './cityList';
import '../../styles/citypanel/index.less';
import Nav from '../nav/Nav';
export default ({cityList = [], setVisibilityFilter}) => {
return (
)
}
容器组件containers
主要是通过 react-redux 中间件提供的 connect 方法来链接 containers 与 components ,而 connect 方法提供了两个方法 mapStateToProps 与 mapDispatchToProps ,它们定义了 UI 组件的业务逻辑。前者负责输入逻辑。
mapStateToProps 将 state 映射到 UI 组件的参数(Props), mapDispatchToProps 负责输出逻辑,即将用户对 UI 组件的操作映射成 Action,也可以通过 bindActionCreators 方法将 action 的所有方法绑定到props上。
./containers/
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import cityPanelIndex from '../../components/citypanel/index'
import * as ctiyActions from '../../actions/citypanel/actions'
//将state.cityList绑定到props的cityList
functionmapStateToProps(state){
return {
cityList:state.cityList
}
}
//将action的所有方法绑定到props上
functionmapDispatchToProps(dispatch){
return bindActionCreators(ctiyActions,dispatch);
}
export default connect(mapStateToProps,mapDispatchToProps)(cityPanelIndex)
注册store
将 state 和 action 交给 redux 来管理
./stores/createStore.jsx
import { createStore, applyMiddleware } from 'redux'
import thunk from 'redux-thunk'
import reducer from '../reducers/citypanel'
//applyMiddleware来自redux可以包装 store 的 dispatch
//thunk作用是使action创建函数可以返回一个function代替一个action对象
const createStoreWithMiddleware = applyMiddleware(
thunk
)(createStore)
export default functionconfigureStore(initialState){
const store = createStoreWithMiddleware(reducer, initialState)
//热替换选项
if (module.hot) {
// Enable Webpack hot module replacement for reducers
module.hot.accept('../reducers/citypanel', () => {
const nextReducer = require('../reducers/citypanel')
store.replaceReducer(nextReducer)
})
}
return store
}
App主文件入口
最终Provider包装主组件(containers)
Main.jsx
/**
* citypanel主入口
*/
import React from 'react'
import { Provider } from 'react-redux'
import App from '../../containers/citypanel/App'
import configureStore from '../../stores/configureStore'
const store = configureStore()
export default () => {
return (
)
}
一个react + redux 应用完成了
演示: http://giscafer.com/react-demo-list/#/citypanel
源码: https://github.com/giscafer/react-demo-list
(完)
参考链接
react 地区筛选_React 与 Redux 实践 —— 城市筛选面板相关推荐
- react实战项目_React实战之React+Redux实现一个天气预报小项目
引言 经过一段时间的React学习,React和Vue的开发确实有很大的不同,但是都是MVVM框架,因此上手没有很大的难度,这次用React+Redux开发一个天气预报小项目.源码地址:https:/ ...
- XCoreRedux框架:Android UI组件化与Redux实践
XCoreRedux框架:Android UI组件化与Redux实践 @author: 莫川 https://github.com/nuptboyzhb/ XCoreRedux源码+Demo:http ...
- 城市筛选数据(根据2020年度全国统计用区划代码和城乡划分代码更新维护的标准)
根据2020年度全国统计用区划代码和城乡划分代码更新维护的标准,整理的城市联动筛选数据: /* 根据2020年度全国统计用区划代码和城乡划分代码更新维护的标准 */ var cityList = [{ ...
- 使用Typescript的巧妙React上下文技巧-不是Redux
by Bill Girten 比尔·吉尔滕(Bill Girten) 使用Typescript的巧妙React上下文技巧- 不是 Redux (Clever React context tricks ...
- 织梦联动类别-地区调用不显示第三级城市的解决方法
织梦联动类别-地区调用不显示第三级城市的原因 1.附加表dede_addoninfos 或者 你的其他表中的字段nativeplace数据类型为int型,无法保存第三级城市对应的的evalue值(比如 ...
- 查快递,如何按发货城市筛选快递单号
最近有很多朋友在问,有没有一种方法,可以查询每个快递单号物流,并按条件筛选部分单号呢?小编的回答当然是有的,下面一起来学习一下. 材料准备: 一台Win系统的电脑 快递单号 步骤演示: 在操作之前,我 ...
- React全家桶(技术栈) redux 代码
React全家桶(技术栈) redux 代码 压缩包下载 https://download.csdn.net/download/qq_42740465/87629665 README.md ## 1. ...
- React,手写简易redux(二)- By Viga
React,手写简易redux(二) 本章节会完成一个简易的redux实现 该系列内容会逐步实现简易的redux 使用技术栈:vite+react 该系列感谢@方应杭 的react教学视频 目录 实现 ...
- react实现汉堡_React全家桶实战
背景 学习一门前端框架,不动手是不行的.所以当我学习react有一段时间时,就打算开始写一个react的个人项目,前后端一起写的话,比较耗时间,所以就选了提供了优质api的Cnode社区,感谢.(如果 ...
最新文章
- JDK 11版本时间表
- python执行命令并返回结果集_Python接口测试结果集实现封装比较
- CrateDB——全文搜索使用的是lucene,尚不知其底层实现
- CentOS6.5下编译R源码并安装Spark R
- 排队接水pascal程序
- Java String compareTo()方法与示例
- struts2--文件上传大小
- KMP——怪盗基德的挑战书(hdu4552)
- python代码删掉了几行怎么撤回_仅78行代码实现微信撤回消息查看 | Python itchat
- 北京邮电大学在职研究生计算机,北京邮电大学在职研究生专业
- Scrcpy投屏软件教程(将手机内容投屏到电脑上)
- 一图秒懂“天使投资、VC、PE” 与“A轮、B轮、C轮融资”的关系
- yml文件中${}的使用
- 【k8s】重启kubelet、查看所有服务
- 三个点在同一个半圆的概率_圆内任取三点/四点在同一半圆内的概率是多少?...
- 基于 LuCI 的开源主题 luci-them-rosy
- 硬件产品如何防止抄板
- 向上沟通-管理你的上司
- 前端初学——模拟做的旧版小网站
- 2022年全球及中国公务汽车轮胎行业头部企业市场占有率及排名调研报告
热门文章
- 【Python】通过xlsxwriter向excel表格中插入图片、本地超链接
- 记录一下JoinPoint的getSignature方法
- Zuul网关并发量调试
- 小团队选择什么云盘?
- 程序员版的“鱿鱼游戏”趣图来了!
- RN项目安卓真机调试步骤
- WPF绘图(图形的效果与变形)
- jq异步实现ajax,用jQuery的AJax实现异步访问、异步加载
- 三星手机不想使用html,三星note8 用过之后就不想用S系列了 顺畅
- 我的世界1.8.9无需正版的服务器,我的世界1.8.9正式版