文档章节

Redux的一些手法记录

LinearLaw
 LinearLaw
发布于 06/20 11:46
字数 1128
阅读 8
收藏 0
点赞 0
评论 0

Redux

Redux的基本概念见另一篇文。 这里记录一下Redux在项目中的实际操作的手法。

actions

首先定义action.js,actions的type,可以另起一个action-type.js文件。
action-type.js用来存放action.type,这样分离的好处是,你可以直观的看到各个action所执行的功能。

action-type.js,eg:
	export const REPORT = "REPORT";

action.js,eg:
	import \* as rdcType from "./action-type.js";
	export const list = (data)=>{
		return {
			type:rdcType.REPORT,
			data,
		}
	}

这里定义了一个action名为list,调用actions的时候,传入参数data,是一个对象。

reducer

Reducer用来响应action的操作,在reducer里面,
需要引入actions-type.js用来区分不同的actions操作,
需要定义一个初始的状态,作为reducer方法的初始state,

reducer.js,eg:
	import * as rdcType from "./action-type.js";

	let defaultState = {
		dataList:[],
	}

	export const list = (state = defaultState,action)=>{
		console.log("adga",state);
		switch(action.type){
			case rdcType.REPORT:
				return {
				  dataList:[...state.dataList , action.data]
				};
			default:
				return state;
		}
	}

Tips:需要注意的是,在这里定义的state,在组件中引入的时候,引入的props的key即为list, 例如,访问 defaultState 中的 dataList,调用则是 this.props.list.dataList。 以此类推。

Tips:在reducer的操作中,不要直接对state进行操作,而应该返回一个新的对象。

1、例如,defaultState 中的 dataList,要往里插入一条数据,
      return的应该是state和dataList组合的数据,而非简单的push,
      return {
        dataList : [...state.dataList , action.data ]
      }

2、官方文档:Redux 假定你永远不会修改 reducer 里传入的对象。
        任何时候,你都应该返回一个新的 state 对象。

3、如果希望尽可能做到不修改state对象,可以使用 Immutable 库。

4、不应该直接 Object.assign(state, newData),
    应该用 Object.assign({}, state, newData)

createStore

store.js作为redux的入口文件,引入reducer,调用createStore生成store,

如果是多个reducer,需要使用combineReducer进行合并。
   eg:
	    combineReducers({...home, ...production}),

    store.js,eg:
    	import { createStore , combineReducers  } from "redux";
    	import * as Rdc from "./reducer.js"

    	//创建store,参数为reducer
    	let store = createStore(
    		combineReducers(Rdc)
    	);
    	export default store;

Component

定义好了的action.js和reducer.js,在React component中的使用同样需要注意很多细节。

    1、首先,react应用的入口文件,index.js,使用 Provider 对store进行映射。

    index.js,eg:
    	import App from './App';
    	import {Provider} from "react-redux";
    	import store from "./store/store.js";

    	ReactDOM.render(
    		<Provider store={store}>
    			<App />
    		</Provider>
    		, document.getElementById('root'));

    store挂载到Provider标签上,内部的App组件中的内容即可使用this.props调用store里的内容

2、组件内部引用 组件内部使用store时, 思路是:引入所需要使用的action.js,调用action的方法, 在暴露到外界之前使用connect进行reducer和state的映射

(1)、import { list } from "../store/action.js"
    引入之后,可以使用this.props.actions.list()调用list方法

(2)、UI渲染
    如前所述,reducer.js有一个方法叫做list,要使用list的state,
    直接使用 this.props.list.dataList 即可

    Tips:与vuex不同,state是挂在reducer的方法下的,而非单独的state对象

(3)、connect
    在不使用redux之前,react component是这样暴露到外界的

    eg:
        class ACom extends Component {
          render(){
            return (
              <div>
                React组件
              </div>
              )
          }
        }
        export default ACom

    使用redux之后,在export之前需要进行reducer和state的映射。
    首先进行state的映射,return的对象取决于组件中调用的state的变量名
    eg:
        const mapStateToProps = (state)=>{
            return {
                list:state.list
            }
        }
    接着进行action的映射
        eg:
        const mapDispatchToProps = (dispatch) => {
            return {
              actions:bindActionCreators({
                list:list
              },dispatch)
            }
        }
    bindActionCreators作用是完成从action到reducer的映射
    相当于 this.props.dispatch(list);
    不同的是,bindActionCreators可以传入多个action。

    最后,将component和store进行connect
    eg:
        export default connect(mapStateToProps, mapDispatchToProps )(ACom);


    至此,大功告成。

异步action

action函数return的都是一个带有type的对象,
在react component中,action的方法被封装为自动dispatch到reducer中,改变state(bindActionCreators的作用)

异步action,即在action里面调用异步函数,在异步函数中调用dispatch来触发reducer,
为了完成这套操作,需要引入一个redux-thunk的中间件进行封装。

引入redux-thunk中间件

store.js
    import thunk from "redux-thunk"
    let store = createStore(
        combineReducers(Rdc),
        applyMiddleware(thunk)
    );
    export default store;

action.js
    export const getList = (params)=>{
        return function(dispatch){
            try{
              let url = "https://api.cangdu.org/shopro/data/balance";
              axios.get(url,params).then((res)=>{
                  dispatch({
                    type:"",
                    data:result.data.data||{}
                  });
              },(err)=>{
                throw err;
              })
            }catch(err){
              throw err;
            }
        }
    }

redux-thunk中间件,
    作用即为,action除了能返回对象还可以返回函数,
    这时,这个 action 创建函数就成为了 thunk。
    在异步的action中,return的函数内部可以进行dispatch。

异步的action返回了一个function,这个function内部进行异步操作, 并在异步操作的成功或失败的结果之后,进行一个dispatch操作,手动触发reducer

在react component,异步actions的调用方法和普通的actions一样,this.props调用
    eg:
        this.props.getList(data)

© 著作权归作者所有

共有 人打赏支持
LinearLaw
粉丝 4
博文 33
码字总数 39273
作品 0
深圳
个人站长
react技术栈实践(从前到后撸一个电影搜集应用)

之前做了个电影搜集的小应用,前端采用react,后端采用express+mongodb,最近又将组件间的状态管理改成了redux,并加入了redux-saga来管理异步操作,记录一些总结 在线地址 源码 主要功能 爬取...

xiyuyizhi
2017/12/17
0
0
react技术栈实践(我们也应该会点后端)-一个电影webApp

之前做了个电影搜集的小应用,前端采用react,后端采用express+mongodb,最近又将组件间的状态管理改成了redux,并加入了redux-saga来管理异步操作,记录一些总结 在线地址 源码 主要功能 爬取...

xiyuyizhi
2017/12/17
0
0
基于react native打造属于自己的博客app

关注react native这个技术很久了,去年就做了一个简单的Demo,最近有时间,重新了解了一下react native的现状,发现已经有很大的进步,现在完善了一下原有的项目,并重新开源共享一下。 背景 ...

IT米粉
2017/10/17
0
0
[译] 如何让你的 React 应用完全的函数式,响应式,并且能处理所有令人发狂的副作用

原文地址:How to make your React app fully functional, fully reactive, and able to handle all those crazy side effects 原文作者:Luca Matteis 译文出自:掘金翻译计划 译者:Zhang......

zhe.zhang
07/04
0
0
redux中间件的原理——从懵逼到恍然大悟

前言 react已经出来很久了,其生态圈之庞大,一锅炖不下!各种react-xx,已让我们不堪重负,github上随便一个demo,引入的模块至少都是五指之数+。看着头疼,嚼之无味……。 在此建议新学者,...

钱天兵
2017/11/28
0
0
redux-logic源码阅读

在用React和Redux做开发时, 都会用到异步的一些东西, 之前更多的用的是或者之类的, 但是都有用的不顺的地方, 有一次突然发现redux-logic是一个很不错的解决方案, 用起来也感觉很顺手, 与市面...

小宋
06/08
0
0
jiaming_/ZhiHuDailyRN

简介 这是一款使用ReactNative技术写的模仿《知乎日报》的客户端。 主要目的为学习ReactNative,掌握其API使用及原理等知识。 主要实现了《知乎日报》App的首页,详情页,评论页,专题页,抽...

jiaming_
2017/06/27
0
0
【前端】react学习阶段总结,学习react、react-router与redux的这些事儿

前言  插一下,我发现好多踩。。。。。是理解失误么? 欢迎指正。 ---------------------------------------------   借用阮一峰的一句话:真正学会 React 是一个漫长的过程。 这句话在我...

grootzhang
2017/09/01
0
0
redux 实践中的的策略考量(下)

在上篇中讨论了以下几个问题,欢迎查阅 重复造轮子还是抽象 结构嵌套还是关系化存储 简单指令集还是复杂指令集 地址:redux 实践中的的策略考量(上) - 知乎专栏 单一状态树? redux 官方总是...

waterwu
2017/05/05
0
0
[译] 从设计师的角度看 Redux

原文链接: www.smashingmagazine.com/2018/07/red… 推荐理由: 插图大爱 没有空洞的概念 也没有海量的代码! 内容概要: 你是否知道 Redux 的真正威力远不止状态管理吗?你是否想要了解 Redu...

SangKa
07/11
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

庆祝自己过了ACP!!

经过三个月的努力,ACP终于过了,但这只是敏捷实践的开始,路还长

talen
4分钟前
0
0
markdown

首次使用Markdown写博客,好激动! Hexo在Github中搭建博客系统(5)Markdown语法 Hexo在Github中搭建博客系统(5)Markdown语法

miaojiangmin
5分钟前
0
0
10.34 linux系统日志 10.35 screen工具

liunx系统日志 内容: • /var/log/messages • /etc/logrotate.conf 日志切割配置文件 参考https://my.oschina.net/u/2000675/blog/908189 • dmesg命令 • /var/log/dmesg 日志 • last命令......

Linux_老吴
5分钟前
0
0
java 重写排序规则,用于代码层级排序

1.dataList 是个List<Map<String,Object>> 类型的数据,所以比较的时候是冲map中获取数据,并且数据不能为空。 2.dataList 类型是由自己定义的,new Comparator<Map<String,Object>> 也是对应......

轻量级赤影
12分钟前
0
0
分布式大型互联网企业架构!

摘要: 开发工具 1.Eclipse IDE:采用Maven项目管理,模块化。 2.代码生成:通过界面方式简单配置,自动生成相应代码,目前包括三种生成方式(增删改查):单表、一对多、树结构。生成后的代码...

明理萝
12分钟前
0
1
对MFC程序的一点逆向分析:定位按钮响应函数的办法

因为消息响应函数保存在AFX_MSGMAP_ENTRY数组中, 观察nMessage、nCode、nID、pfn利用IDA在rdata段中搜索即可, 在IDA中找到代码段基址0x401000,函数地址0x403140, 在WinDbg中运行!addre...

oready
13分钟前
0
0
阻抗匹配与史密斯(Smith)圆图基本原理

参考:http://bbs.eeworld.com.cn/thread-650695-1-1.html

whoisliang
18分钟前
0
0
maven配置文件分离

一、 简介 遇到很多次别人处理的项目,测试环境,本地开发和线上环境的配置不一样,每一次部署都要重新修改配置文件,提交审核代码,才能打包,非常不方便。 其实相信很多人都知道可以使用m...

trayvon
18分钟前
0
0
MacOS和Linux内核的区别

导读 有些人可能认为MacOS和Linux内核有相似之处,因为它们可以处理类似的命令和类似的软件。甚至有人认为苹果的MacOS是基于linux的。事实上,这两个内核的历史和特性是非常不同的。今天,我...

问题终结者
34分钟前
1
0
SpringBoot | 第八章:统一异常、数据校验处理

前言 在web应用中,请求处理时,出现异常是非常常见的。所以当应用出现各类异常时,进行异常的捕获或者二次处理(比如sql异常正常是不能外抛)是非常必要的,比如在开发对外api服务时,约定了响...

oKong
42分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部