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 ...
随机推荐
- 基于mysql数据库 关于sql优化的一些问题
mysql数据库有一个explain关键词,可以对select语句进行分析并且输出详细的select执行过程的详细信息. 对sql explain后输出几个字段: id:SELECT查询的标识符,每个 ...
- jquery 打星评分插件
<link rel="stylesheet" href="/static/vendor/raty/jquery.raty.css"> <scr ...
- laravel(4.2) +Zizaco
操作步骤:https://github.com/Zizaco/entrust/tree/1.0 这篇博客说的蛮详细的:http://blog.boolw.com/?p=241 简化后的步骤 1.在根项 ...
- Apache手册
一.apache的安装 如果不指定安装位置,默认为/usr/local/apache2/
- idea 中的svn的使用
http://www.cnblogs.com/whc321/p/5669804.html 很详细
- WebStorm下载安装
下载地址:https://www.jetbrains.com/webstorm/ 注册码: http://idea.codebeta.cn
- python010 Python3 元组
Python3 元组Python 的元组与列表类似,不同之处在于元组的元素不能修改.元组使用小括号,列表使用方括号.元组创建很简单,只需要在括号中添加元素,并使用逗号隔开即可.如下实例: tup1 = ...
- php实现设计模式————单例模式
php实现设计模式————单例模式 什么是单例模式 为什么要使用单例模式 php中有哪些方式实现新建一个对象实例 如何阻止这种实例化实现理想的单例模式 代码实现 什么是单例模式 为什么要使用单例模式 ...
- 【贪心】HDU 最少拦截系统
https://vjudge.net/contest/68966#problem/I [题解] http://www.cnblogs.com/kuangbin/archive/2012/08/03/2 ...
- web移动端小tip,box-flex
1,移动端页面 最重要的标签: <meta content="width=device-width,initial-scale=1.0,minimum-scale=1,maximum- ...