react-redux 之 provider 和 connect
1.Provider
提供的是一个顶层容器的作用,实现store的上下文传递
2.connect
可以把state和dispatch绑定到react组件,使得组件可以访问到redux的数据
react-redux
使用一个react-redux 的库使得redux的使用更简洁,它提供了provider和connect方法
先在入口文件内使用
<Provider store={store}>
<组件/>
</provider>
store
这里使用了redux中的重要组成部分store,所以下面先说store的文件构成
- 把所有数据取出,如果是静态的就引入json文件,如果是动态的就使用fetch或者ajax加载,来自服务端的 state 可以在无需编写更多代码的情况下被序列化并注入到客户端中,在开发中使用本地的json数据可以加速开发
- 然后使用redux库中的createStore把reducer和上一步的数据实例化出一个store,eg:
const store = createStore(rootReducer, defaultState);
这样最简单的store就做好了,然后上面还有reducer需要处理
reducer
reducer的简单作用就是根据action的不同跟新state,此处的更新必须是返回一个新的state,而不是在原来的state上做修改
例如:实现一个增加评论和删除评论的功能
//注意此处传的参为state和action
let postComments = (state = [], action) => {
switch (action.type){
case "ADD_COMMENT":
return [
...state, //原来的state
{
user: action.author,增加的state
text: action.text
}
];
case "REMOVE_COMMENT":
return [
...state.slice(0,action.i), //剔除数组中需要删除的那个
...state.slice(action.i + 1)
];
default:
return state;
}
};
在我们的项目中,我们可能会分模块和功能写多个reducer文件,但最终,我们都需要把它合并到一个里面,这需要使用redex中的combineReducers
import { combineReducers } from "redux";
import * as reducers from "./reducers"
const rootReducer = combineReducers({
...reducers
});
export default rootReducer;
这是通用的用法,而在我学习的视频中,他在combineReducers中还加上了routerReducer,它的具体作用可以看官方文档react-router-redux,反正我是没怎么看懂,具体的作用感觉就是在切换页面的时候会多出一个LOCATION_CHANGE的时间,可以用来追踪页面的变化,具体要使用的话需要更改3个文件,
1.上面的合并reducers的文件,在引入react-router-redux库的routerReducer方法后,在combineReducers中加上routing: routerReducer
2.在store.js中加上以下代码
...
import { syncHistoryWithStore } from 'react-router-redux';
import { browserHistory } from 'react-router';
...
export const history = syncHistoryWithStore(browserHistory, store);
3.在主入口文件中的<Router>根路由标签使用store.js中导出的history
<Router history={history}>
...
<Router>
action
action我把它做是一个接口,它主要是和reducer联动的,它默认必须返回一个type,用这个type的值来判断reducer中做哪一步操作
例如:我需要增加一个评论,那我需要传评论文章的id,评论的用户,评论的内容,所以定义如下
// add comment
export let addComment = (postId, author, text) => {
return {
type: 'ADD_COMMENT',
postId,
author,
text
}
};
整合store,reducer,action
- 我们的store已经在provider里面传入了,但我们provider内的组件不能直接使用,要使用就必须是connect过的组件,这方面的介绍在React 实践心得:react-redux 之 connect 方法详解这篇文章里有详细说明
- store.js里面我们就把reducer和store的数据进行实例化了,会创建出store的几个默认方法dispatch(),getState(),subscribe()
- 缺少的1、是组件能够调用store内的数据;2、通过store提供的dispatch函数将action发送到reducer,reducer通过一个switch函数处理数据,reducer将数据提供给store,更新state,组件自动刷新
以上还未解决的问题就用connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])
来解决,这里我们只使用第一和第二个参数
import { bindActionCreators } from 'redux';
import { connect} from 'react-redux'; //此处传入的state即为store中的defaultState
let mapStateToProps = (state) => {
return{
posts: state.posts,
comments: state.comments
}
}; //此处的actionCreators即为简单的action文件
//Redux 本身提供了 bindActionCreators 函数,来将 action 包装成直接可被调用的函数
let mapDispatchToProps = (dispatch) => {
return bindActionCreators(actionCreators, dispatch);
}; //最后调用connect()
const App = connect(mapStateToProps, mapDispatchToProps)(Main);
export default App;
补充
使用redux-dev-tools
要使用redux的调试工具需要在store.js文件中的createStore()步骤中加入第三个参数,enhancers
import { createStore, compose} from 'redux';
//redux-dev-tools
const enhancers = compose(
window.devToolsExtension ? window.devToolsExtension() : f => f
); const store = createStore(rootReducer, defaultState, enhancers);
让改变reducer后能够即时刷新页面
webpack可以监听我们的组件变化并做出即时相应,但却无法监听reducers的改变,所以在store.js中增加一下代码
//此处accepts的参数是reducers的存放路径,require()内的路径为执行combineReducers()的文件
if(module.hot){
module.hot.accept("./reducers/", () => {
const nextRootReducer = require('./reducers/index').default;
store.replaceReducer(nextRootReducer);
})
}
总结
经过一次回顾后,感觉比之前只看这视屏照着打要理解得更加深刻,虽然还是会有部分不能融会贯通,但基本的流程是清楚了不少,感觉果然向阮一峰老师的博文中指出使用react很方便,但是redux就不是一定要选择用的,因为它还是存在一定的难度和复杂度的,特别是本身的业务逻辑不多,程序不大的时候
react-redux 之 provider 和 connect的更多相关文章
- React & Redux 的一些基本知识点
一.React.createClass 跟 React.Component 的区别在于后者使用了ES6的语法,用constructor构造器来构造默认的属性和状态. 1. React.createCl ...
- react+redux教程(一)connect、applyMiddleware、thunk、webpackHotMiddleware
今天,我们通过解读官方示例代码(counter)的方式来学习react+redux. 例子 这个例子是官方的例子,计数器程序.前两个按钮是加减,第三个是如果当前数字是奇数则加一,第四个按钮是异步加一( ...
- [Redux] Generating Containers with connect() from React Redux (VisibleTodoList)
Learn how to use the that comes with React Redux instead of the hand-rolled implementation from the ...
- webpack+react+redux+es6开发模式
一.预备知识 node, npm, react, redux, es6, webpack 二.学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入 ...
- react+redux教程(四)undo、devtools、router
上节课,我们介绍了一些es6的新语法:react+redux教程(三)reduce().filter().map().some().every()....展开属性 今天我们通过解读redux-undo ...
- angular开发者吐槽react+redux的复杂:“一个demo证明你的开发效率低下”
曾经看到一篇文章,写的是jquery开发者吐槽angular的复杂.作为一个angular开发者,我来吐槽一下react+redux的复杂. 例子 为了让大家看得舒服,我用最简单的一个demo来展示r ...
- React + Redux 入坑指南
Redux 原理 1. 单一数据源 all states ==>Store 随着组件的复杂度上升(包括交互逻辑和业务逻辑),数据来源逐渐混乱,导致组件内部数据调用十分复杂,会产生数据冗余或者混用 ...
- webpack+react+redux+es6
一.预备知识 node, npm, react, redux, es6, webpack 二.学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入 ...
- React+Redux学习笔记:React+Redux简易开发步骤
前言 React+Redux 分为两部分: UI组件:即React组件,也叫用户自定义UI组件,用于渲染DOM 容器组件:即Redux逻辑,处理数据和业务逻辑,支持所有Redux API,参考之前的文 ...
- react+redux+generation-modation脚手架添加一个todolist
当我遇到问题: 要沉着冷静. 要管理好时间. 别被bug或error搞的不高兴,要高兴,又有煅炼思维的机会了. 要思考这是为什么? 要搞清楚问题的本质. 要探究问题,探究数据的流动. TodoList ...
随机推荐
- SFM作业
代码:https://github.com/jianxiongxiao/SFMedu PPT:http://3dvision.princeton.edu/courses/SFMedu/slides.p ...
- AspNetCore容器化(Docker)部署(二) —— 多容器通信
一.前言 着上一篇 AspNetCore容器化(Docker)部署(一) —— 入门,在单个容器helloworld的基础上引入nginx反向代理服务器组成多容器应用. 二.配置反向代理转接 配置转接 ...
- Java开发者写SQL时常犯的10个错误
首页 所有文章 资讯 Web 架构 基础技术 书籍 教程 我要投稿 更多频道 » - 导航条 - 首页 所有文章 资讯 Web 架构 基础技术 书籍 教程 我要投稿 更多频道 » - iOS ...
- 【thinkPHP5实现文件上传】
上传文件 ThinkPHP5.0对文件上传的支持更加简单. 内置的上传只是上传到本地服务器,上传到远程或者第三方平台的话需要自己扩展. 假设表单代码如下: <form action=" ...
- Linux磁盘管理及Lvm
1. 硬盘接口 IDE: SATA:常用: SCSI:主要用于高端服务器,linux默认: SAS 2. 硬盘种类 SATA硬盘:串口硬盘,有较强的纠错能力: SCSI 硬盘:默认硬盘: SAS 硬盘 ...
- day15-python之变量和递归
1.局部变量与全局变量 #!/usr/bin/env python # -*- coding:utf-8 -*- # name='lhf' # def change_name(): # global ...
- 算法导论 第十章 基本数据类型 & 第十一章 散列表(python)
更多的理论细节可以用<数据结构>严蔚敏 看几遍,数据结构很重要是实现算法的很大一部分 下面主要谈谈python怎么实现 10.1 栈和队列 栈:后进先出LIFO 队列:先进先出FIFO p ...
- CSS3 pointer-events:none 让你摆脱事件的烦恼
以前没遇到这个属性,在一个偶然的博文下发现该属性真的好用,你是否遇到过写鼠标移入显示文本的效果时,鼠标在元素内的每一次移动都会造成要显示文本的闪烁或是突然的消失?只要在被控制的元素中加上这个属性完美解 ...
- 比较spring cloud和dubbo,各自的优缺点是什么
dubbo由于是二进制的传输,占用带宽会更少springCloud是http协议传输,带宽会比较多,同时使用http协议一般会使用JSON报文,消耗会更大 dubbo的开发难度较大,原因是dubbo的 ...
- LR百分比模式
1 场景模式切换 Vuser Group Mode转换为Percentage Mode:如下 Scenario->Convert Scenairio to the VuserGroup Mod ...