Redux 学习笔记

1：首先安装redux：

npm install --save redux

2：引入redux ：

import { createStore } from 'redux';

//首先创建执行函数，Reducer 是一个函数，
//它接受 Action 和当前 State 作为参数，返回一个新的 State。
function counter(state, action) {switch (action.type) {case 'INCREMENT':return state + 1;case 'DECREMENT':return state - 1;default:return state;}
};

//Redux 提供createStore这个函数，用来生成 Store
let store = createStore(counter,10);//createStore方法还可以接受第二个参数，表示 State 的最初状态。这通常是服务器给出的。

//Store 允许使用store.subscribe方法设置监听函数，一旦 State 发生变化，就自动执行这个函数
store.subscribe(() =>alert(store.getState())//当前时刻的 State，可以通过store.getState()拿到。
);

store.dispatch({ type: 'INCREMENT' });//store.dispatch接受一个 Action 对象作为参数，将它发送出去(dispatch分派的意思)

3：以下两种方式是等价的：

一级父组件：

<TodoListtodos={[{text: 'Use Redux',completed: true}, {text: 'Learn to connect it to React',completed: false}]}} />

二级父组件：

const TodoList = React.createClass ({render() {return (<View>{this.props.todos.map((todo, index) =><Todo text={todo.text}completed = {todo.completed})}</View>
      )}})

三级子组件：

const Todo = React.createClass({render() {return (<JDText{this.props.text}</JDText>
    );}
})

其中二级父组件还可以这样写：

const TodoList = React.createClass ({render() {return (<View>{this.props.todos.map((todo, index) =><Todo {...todo}key={index}onClick={() => this.props.onTodoClick(index)} />
          )}</View>
      )}}
)

4：关于export default 和 module.exports 区别　

　　　　　　　　　　　　　　　　　　　　　　　　module.exports是CommonJS的模块规范

　　　　　　　　　　　　　　　　　　　　　　　　export default是ES2015的模块规范

加载方式	规范	命令	特点
运行时加载	CommonJS/AMD	require	社区方案，提供了服务器/浏览器的模块加载方案。非语言层面的标准。只能在运行时确定模块的依赖关系及输入/输出的变量，无法进行静态优化。
编译时加载	ESMAScript6+	import	语言规格层面支持模块功能。支持编译时静态分析，便于JS引入宏和类型检验。动态绑定。

使用方法：

方法一：统一使用ES6规范

使用export default connect(select)(App);抛出，

则使用import App from './containers/App'接受；

方法二：统一使用CommonJs规范

使用module.exports = connect(select)(App);抛出，

则使用const App = require('./containers/App');接受；

转载于:https://www.cnblogs.com/xiaozhumaopao/p/7799825.html

Redux 学习笔记相关推荐

redux学习笔记归纳
设计思想: (1)Web 应用是一个状态机,视图与状态是一一对应的. (2)所有的状态,保存在一个对象里面. 核心源码: 基本概念: 1.Store:就是保存数据的地方,你可以把它看成一个容器.整个 ...
ci mysql 事务_MySQL事务-学习笔记
MySQL事务-学习笔记 MySQL事务事务的意义案例:银行转账过程 A向B转账500,A原来有1000,B有500. 分析: SQL处理过程: A 减少 500 B 增加 500 以上两点必须同 ...
React-Native学习笔记
资源: 1. Redux 中文文档 Redux 中文文档 2. Atom文本编辑工具 Atom文本编辑工具 3. React-native 官方文档 React-native 官方文档问题: 1. ...
react组件卸载调用的方法_好程序员web前端培训分享React学习笔记（三）
好程序员web前端培训分享React学习笔记(三),组件的生命周期 React中组件也有生命周期,也就是说也有很多钩子函数供我们使用, 组件的生命周期,我们会分为四个阶段,初始化.运行中.销毁.错误处 ...
react取消捕获_React学习笔记（三）
React学习笔记(三),组件的生命周期 React中组件也有生命周期,也就是说也有很多钩子函数供我们使用, 组件的生命周期,我们会分为四个阶段,初始化.运行中.销毁.错误处理(16.3之后) 初始化 ...
5214页PDF的进阶架构师学习笔记，阿里巴巴内部Jetpack宝典意外流出
背景在深度使用 Flutter 开发过程中,我们遇到了业务代码耦合严重,代码可维护性糟糕,如入泥泞.我们需要一个统一的应用框架来摆脱当下的开发困境,而这也是 Flutter 领域空缺的一块处女地. ...
【学习笔记】React+React全家桶学习笔记
文章目录 1 为什么要使用React 2 React的定义 3 React的三大特性 4 React入门 4.1 hello_react 4.2 虚拟DOM的创建 4.3 JSX 4.4 模块与组件, ...
React Native v0.55 学习笔记1
React Native v0.55 学习笔记1 学习内容来自官网文档0.55版本 RN 是基于 React 的思想,相比于 web 的一些组件,RN 使用的是基于原生( android.ios )的 ...
ant design pro模板_Ant Design Pro 学习笔记
学习笔记摘要介绍 Ant Design Pro 是一个基于Ant Design搭建起来的模板项目.它提供了两个主要布局:BasicLayout.UserLayout,在布局基础上制作了20多个基础页 ...

Redux 学习笔记

Redux 学习笔记相关推荐

最新文章

热门文章