Learn how to use the that comes with React Redux instead of the hand-rolled implementation from the previous lesson.

Code to be refactored:

class VisibleTodoList extends Component {
componentDidMount() {
const { store } = this.context;
this.unsubscribe = store.subscribe(() =>
this.forceUpdate()
);
} componentWillUnmount() {
this.unsubscribe();
} render() {
const props = this.props;
const { store } = this.context;
const state = store.getState(); return (
<TodoList
todos={
getVisibleTodos(
state.todos,
state.visibilityFilter
)
}
onTodoClick={id =>
store.dispatch({
type: 'TOGGLE_TODO',
id
})
}
/>
);
}
} VisibleTodoList.contextTypes = {
store: React.PropTypes.object
};

In the code, we handle the 'context', subscribe state and unsubscribe. Also we need to always remember write 'contextTypes'. There are lots of things todo.

Actually we can use 'ReactRedux' libaray to simpy our life:

'ReactRedux' libaray's connect() fucntion also pass the context down to the component.

VisibleTodoList:

So get the todos and write into mapStateToProps function:

const mapStateToProps = (state) => {
return {
todos: getVisibleTodos(
state.todos,
state.visibilityFilter
)
};
};

then get onTodoClick dispatch function to the mapDispatchToProps function:

const mapDispatchToProps = (dispatch) => {
return {
onTodoClick: (id) => {
dispatch({
type: 'TOGGLE_TODO',
id
});
}
};
};

then we can use 'connect()()' function to connect state, dispatch action and Render component together:

const { connect } = ReactRedux;
const VisibleTodoList = connect(
mapStateToProps,
mapDispatchToProps
)(TodoList);

-------------------------

code:

const mapStateToProps = (state) => {
return {
todos: getVisibleTodos(
state.todos,
state.visibilityFilter
)
};
}; const mapDispatchToProps = (dispatch) => {
return {
onTodoClick: (id) => {
dispatch({
type: 'TOGGLE_TODO',
id
});
}
};
}; const { connect } = ReactRedux;
const VisibleTodoList = connect(
mapStateToProps,
mapDispatchToProps
)(TodoList);

[Redux] Generating Containers with connect() from React Redux (VisibleTodoList)的更多相关文章

  1. [Redux] Generating Containers with connect() from React Redux (FooterLink)

    Code to be refactored: class FilterLink extends Component { componentDidMount() { const { store } = ...

  2. [Redux] Generating Containers with connect() from React Redux (AddTodo)

    Code to be refacted: const AddTodo = (props, { store }) => { let input; return ( <div> < ...

  3. 使用react+redux+react-redux+react-router+axios+scss技术栈从0到1开发一个applist应用

    先看效果图 github地址 github仓库 在线访问 初始化项目 #创建项目 create-react-app applist #如果没有安装create-react-app的话,先安装 npm ...

  4. React Redux Sever Rendering实战

    # React Redux Sever Rendering(Isomorphic JavaScript) ![React Redux Sever Rendering(Isomorphic)入门](ht ...

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

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

  6. react+redux教程(五)异步、单一state树结构、componentWillReceiveProps

    今天,我们要讲解的是异步.单一state树结构.componentWillReceiveProps这三个知识点. 例子 这个例子是官方的例子,主要是从Reddit中请求新闻列表来显示,可以切换reac ...

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

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

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

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

  9. 实例讲解基于 React+Redux 的前端开发流程

    原文地址:https://segmentfault.com/a/1190000005356568 前言:在当下的前端界,react 和 redux 发展得如火如荼,react 在 github 的 s ...

随机推荐

  1. USB通讯协议 && 数据传输

    USB2.0通讯协议(spalish)   1.包(packet) 包是USB系统中信息传输的基本单元,所有数据都是经过打包后在总线上传输的.USB包由五部分组成,同步字段(sync).包标识符(PI ...

  2. SVN 代码下载,上传

    代码下载,如: svn co https://99.99.16.1:8080/svn/pavenas/webpy --username bg 代码上传,如: svn commit -m "备 ...

  3. 干货--微信公众平台客户端调试工具-初试WPF开发

    本工具可以由任意一个开发微信公众平台的开发者使用,虽然它本身使用WPF(C#)开发的,但是并不受你想调试的服务所用的语言的影响. 之前一直在做微信公众平台开发,客户端调试是必须做的事情,一直以来都是用 ...

  4. Swift中可能失败的构造器的传播(调用)和重写

    import Foundation /* 可能失败构造器的传播(调用) 1.可能失败的构造器可以调用同一个类中的普通构造器 2.普通构造器不能调用同一个类中的可能失败构造器 3.结构体中, 普通构造器 ...

  5. C#类中字段,属性与方法

    person类 using System; using System.Collections.Generic; using System.Linq; using System.Text; using ...

  6. ref参数的用途

    ref参数 能够将一个变量带入方法进行改变,改变完成后再将改变完成后的变量带出方法 ref参数要求在方法外必须为值赋值,而方法内可以不赋值 static void Main(string[] arr) ...

  7. void (*f(int, void (*)(int)))(int) 函数解析

    函数指针 今天与几个同学看到了一个函数指针定义: void (*f(int, void (*)(int)))(int) 以前在C trap pit fails里面见过,但是文章里面介绍的很详细,但是往 ...

  8. 公众号的秘密,知道一个biz就够了

    公众号的秘密,知道一个biz就够了 微信对于我来说,最有价值的是一个学习渠道,特别是搜狗微信搜索(http://weixin.sogou.com/)能够很方便的搜索公众账号和文章内容,PC端就能够获得 ...

  9. 转。webapp开发小tips

     备忘 - Q:  webapp点击一个按钮调用系统拨号: <a href="tel:12345654321">打电话给我</a> <a href=& ...

  10. 文成小盆友python-num5 -装饰器回顾,模块,字符串格式化

    一.装饰器回顾与补充 单层装饰器: 如上篇文章所讲单层装饰器指一个函数用一个装饰器来装饰,即在函数执行前或者执行后用于添加相应的操作(如判断某个条件是否满足). 具体请见如下: 单层装饰器 双层装饰器 ...