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的更多相关文章

  1. React & Redux 的一些基本知识点

    一.React.createClass 跟 React.Component 的区别在于后者使用了ES6的语法,用constructor构造器来构造默认的属性和状态. 1. React.createCl ...

  2. react+redux教程(一)connect、applyMiddleware、thunk、webpackHotMiddleware

    今天,我们通过解读官方示例代码(counter)的方式来学习react+redux. 例子 这个例子是官方的例子,计数器程序.前两个按钮是加减,第三个是如果当前数字是奇数则加一,第四个按钮是异步加一( ...

  3. [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 ...

  4. webpack+react+redux+es6开发模式

    一.预备知识 node, npm, react, redux, es6, webpack 二.学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入 ...

  5. react+redux教程(四)undo、devtools、router

    上节课,我们介绍了一些es6的新语法:react+redux教程(三)reduce().filter().map().some().every()....展开属性 今天我们通过解读redux-undo ...

  6. angular开发者吐槽react+redux的复杂:“一个demo证明你的开发效率低下”

    曾经看到一篇文章,写的是jquery开发者吐槽angular的复杂.作为一个angular开发者,我来吐槽一下react+redux的复杂. 例子 为了让大家看得舒服,我用最简单的一个demo来展示r ...

  7. React + Redux 入坑指南

    Redux 原理 1. 单一数据源 all states ==>Store 随着组件的复杂度上升(包括交互逻辑和业务逻辑),数据来源逐渐混乱,导致组件内部数据调用十分复杂,会产生数据冗余或者混用 ...

  8. webpack+react+redux+es6

    一.预备知识 node, npm, react, redux, es6, webpack 二.学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入 ...

  9. React+Redux学习笔记:React+Redux简易开发步骤

    前言 React+Redux 分为两部分: UI组件:即React组件,也叫用户自定义UI组件,用于渲染DOM 容器组件:即Redux逻辑,处理数据和业务逻辑,支持所有Redux API,参考之前的文 ...

  10. react+redux+generation-modation脚手架添加一个todolist

    当我遇到问题: 要沉着冷静. 要管理好时间. 别被bug或error搞的不高兴,要高兴,又有煅炼思维的机会了. 要思考这是为什么? 要搞清楚问题的本质. 要探究问题,探究数据的流动. TodoList ...

随机推荐

  1. 基于mysql数据库 关于sql优化的一些问题

    mysql数据库有一个explain关键词,可以对select语句进行分析并且输出详细的select执行过程的详细信息. 对sql explain后输出几个字段: id:SELECT查询的标识符,每个 ...

  2. jquery 打星评分插件

    <link rel="stylesheet" href="/static/vendor/raty/jquery.raty.css"> <scr ...

  3. laravel(4.2) +Zizaco

    操作步骤:https://github.com/Zizaco/entrust/tree/1.0 这篇博客说的蛮详细的:http://blog.boolw.com/?p=241 简化后的步骤 1.在根项 ...

  4. Apache手册

    一.apache的安装 如果不指定安装位置,默认为/usr/local/apache2/

  5. idea 中的svn的使用

    http://www.cnblogs.com/whc321/p/5669804.html 很详细

  6. WebStorm下载安装

    下载地址:https://www.jetbrains.com/webstorm/ 注册码: http://idea.codebeta.cn

  7. python010 Python3 元组

    Python3 元组Python 的元组与列表类似,不同之处在于元组的元素不能修改.元组使用小括号,列表使用方括号.元组创建很简单,只需要在括号中添加元素,并使用逗号隔开即可.如下实例: tup1 = ...

  8. php实现设计模式————单例模式

    php实现设计模式————单例模式 什么是单例模式 为什么要使用单例模式 php中有哪些方式实现新建一个对象实例 如何阻止这种实例化实现理想的单例模式 代码实现 什么是单例模式 为什么要使用单例模式 ...

  9. 【贪心】HDU 最少拦截系统

    https://vjudge.net/contest/68966#problem/I [题解] http://www.cnblogs.com/kuangbin/archive/2012/08/03/2 ...

  10. web移动端小tip,box-flex

    1,移动端页面 最重要的标签: <meta content="width=device-width,initial-scale=1.0,minimum-scale=1,maximum- ...