文档章节

Redux的一些手法记录

LinearLaw
 LinearLaw
发布于 06/20 11:46
字数 1128
阅读 11
收藏 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
深圳
个人站长
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
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
redux中间件的原理——从懵逼到恍然大悟

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

钱天兵
2017/11/28
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Oracle return exit continue

常在循环体中看到下面3种语句: return exit continue 举例说明 啥都没有 -- none begin for i in 1 .. 10 loop if i < 5 then dbms_output.put_line('i < 5, i = ' || to_char......

taadis
今天
3
0
JSONObject 转换时出错 InvocationTargetException

JSONObject 转换时出错java.lang.reflect.InvocationTargetException 一时看不出来是什么问题。 挺奇怪的。 百度参考了一下这个 网页的解决方案 说是类型不对,空? 仔细查看代码,果然是有一...

之渊
今天
3
0
no such module 'pop'问题

在github上 clone 了一个 swift 项目,编译时提示"no such module 'POP'"错误,查了一下居然是因为podfile中指定的最低版本是iOS 11.0,大于我测试手机的iOS版本10.3.3,将Podfile中的最低版...

yoyoso
今天
3
0
redis 系列一 -- 简介及安装

1.简介 redis -- remote dictionary server 远程字典服务 使用 C 语言编写; 高性能的 key-value数据库; 内存数据库,支持数据持久化。 Redis 是一个开源(BSD许可)的,内存中的数据结构存...

imbiao
今天
4
0
nginx log记录请求响应时间

有时为了方便分析接口性能等,需要记录请求的时长,通过修改nginx的日志格式可以做到,如 添加一个新的log_format log_format timed_combined '$remote_addr - $remote_user [$time_local] "...

swingcoder
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部