文档章节

Redux的一些手法记录

LinearLaw
 LinearLaw
发布于 06/20 11:46
字数 1128
阅读 13
收藏 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
博文 36
码字总数 43561
作品 0
深圳
个人站长
私信 提问
react技术栈实践(我们也应该会点后端)-一个电影webApp

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

xiyuyizhi
2017/12/17
0
0
Redux与它的中间件:redux-thunk,redux-actions,redux-promise,redux-sage

序言 这里要讲的就是一个Redux在React中的应用问题,讲一讲Redux,react-redux,redux-thunk,redux-actions,redux-promise,redux-sage这些包的作用和他们解决的问题。 因为不想把篇幅拉得...

韩子卢
08/20
0
0
react技术栈实践(从前到后撸一个电影搜集应用)

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

xiyuyizhi
2017/12/17
0
0
redux中间件的原理——从懵逼到恍然大悟

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

钱天兵
2017/11/28
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
10/29
0
0

没有更多内容

加载失败,请刷新页面

加载更多

JeeSite 4.x 树形结构的表设计和用法

有些同仁对于 JeeSite 4 中的树表设计不太了解,本应简单的方法就可实现,却写了很多复杂的语句和代码,所以有了这篇文章。 在 JeeSite 4 中的树表设计我还是相对满意的,这种设计比较容易理...

ThinkGem
25分钟前
15
0
0022-如何永久删除Kafka的Topic

1.问题描述 使用kafka-topics --delete命令删除topic时并没有真正的删除,而是把topic标记为:“marked for deletion”,导致重新创建相同名称的Topic时报错“already exists”。 2.问题复现...

Hadoop实操
28分钟前
1
0
技术工坊|区块链中的p2p网络(上海)

区块链是一个去中心化的系统,每个节点分布在全球各地,那么节点之间是如何自发地组成网络,又如何进行通信的?区块链中的p2p网络算法与bt下载中的p2p网络有什么区别?11月28日,第29期技术工...

HiBlock
33分钟前
2
0
MySQL性能优化之char、varchar、text的区别

在存储字符串时, 可以使用char、varchar或者text类型, 那么具体使用场景呢? 参考下面这个表结构: 1、 char长度固定, 即每条数据占用等长字节空间;适合用在身份证号码、手机号码等定。 ...

hansonwong
36分钟前
2
0
并发编程系列:4大并发工具类的功能、原理、以及应用场景

一:并发工具包 1.并发工具类 提供了比synchronized更加高级的各种同步结构:包括CountDownLatch、CyclicBarrier、Semaphore等,可以实现更加丰富的多线程操作。 2.并发容器 提供各种线程安全...

游人未归
46分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部