redux笔记1
1.安装redux 使用 npm install -save redux 安装redux,注意使用-save 表示安装到依赖中;
2. 创建store文件夹,下面创建 index.js 和 reducer.js文件;
index.js:
import { createStore } from 'redux';
import reducer from './reducer';
const store = createStore(reducer);
export default store;
reducer.js
const defaultState ={
inputValue:'默认信息',
list:[]
};
export default (state = defaultState ,action)=>{
return state;
}
在html中调用:
constructor(props){
super(props);
this.state = store.getState();//redux 提供的获取数据的方法
console.log(this.state);
}
3. 安装chrome扩展工具: redux devtools
4.
用state 初始化 input 的 value 值,并且value改变后改变state,反过来更新input的值
首先 this.state = store.getState(); store.getState() 函数获取store中保存的状态state ,然后初始化input的value值,改变input触发onChange事件,通过action向store发送 函数的命令 ,然后store对reducers发送原state和actoin。之后reducer通过action的type在改变state,返回state,组件subscribe监听到state发生变化,
注意的是,store是改变维护状态的,而不是reducer,他只是返回一个新的状态给store。
此外,reducer是纯函数,何为纯函数?就是给定固定的输入,肯定会输出同样的出,不会有任何副作用(对输入参数的修改,如改变state);
如 new date()则不是纯函数!
redux中,store相当于管理员,reducer相当于其管理手册。
4.1 创建store和reducer,在组件中使用store.getState() 函数获取store中保存的状态state。
4.2 一旦组件想改变store中保存的状态,就要定义一个action,该action是一个对象,包含了type和value值,dispatch发给store;
4.3 store接受到后,自动把当前的state值和action,发给其管理手册——reducers
4.4 reducer接收到后,根据action的type,改变state,并返回state给store;
4.5 store的状态发生变化之后,组件通过 store.subscribe(()=>{}) ,监听store的状态变化,然后进行下一步的渲染;
store.dispatch(); -----------组件向store传递action的唯一方法
store.subscribe(); ----------监听store中的数据,一旦数据变化,就执行这个函数
store.getState(); ------------获取store中的最新的数据
react components如下:
class App extends Component {
constructor(props){
super(props);
store.subscribe(()=>{this.handleStoreChange()})//通过subscribe监听 store 状态改变
this.state = store.getState(); //初始化时获取store的state
} render() {
return (
<input id="box"
value = {this.state.inputValue}
onChange = {(e)=>{
this.handleInputChange(e)
}}
/>
);
}
handleInputChange(e){
const action ={ //组件创建action这句话,也就是告诉store,我要做什么事情。
type:'change_input_value',
value:e.target.value
}
store.dispatch(action); //这里是把这句话发送给store
}
handleStoreChange(){
this.setState(store.getState())//更新组件的状态
}
}
export default App;
对应的reducer:
const defaultState ={
inputValue:'默认信息',
list:[]
};
export default (state = defaultState ,action)=>{
if(action.type === 'change_input_value'){
let newState = JSON.parse(JSON.stringify(state));
newState.inputValue = action.value;
return newState;
}
return state;
}
5 actionType的拆分,由于在组件中和reducer中,均使用到了action的type类型,在两个页面中,一不小心写错,不容易查看,可以将type拆写成actionType的定义:
因此在store中定义actionType中定义:
export const CHANGE_INPUT_VALUE = 'change_input_value'
export const ADD_INPUT_VALUE = 'add_input_value'
export const DELETE_LIST_ITEM = 'delete_list_item'
从而在组件和reducer中使用常量的定义:
submitData(){
const action = {
type:ADD_INPUT_VALUE,
}
store.dispatch(action);
}
deleteList(index){
const action = {
type:DELETE_LIST_ITEM,
index
}
store.dispatch(action);
}
6 使用actionCreator.js 提取组件中定义的所有action;
由于组件中定义了多个action
submitData(){
const action = {
type:ADD_INPUT_VALUE,
}
store.dispatch(action);
}
deleteList(index){
const action = {
type:DELETE_LIST_ITEM,
index
}
store.dispatch(action);
}
故,可以把这些提取到一个单独的文件中:
import {CHANGE_INPUT_VALUE,} from './actionType.js' export const changeInputValue = (value)=> {
return (
{
type:CHANGE_INPUT_VALUE,
value
}
)
}
//这两种方式是一样的
export const changeInputValues = (value)=> ({
type:CHANGE_INPUT_VALUE,
value
})
然后在组件中定义:
redux笔记1的更多相关文章
- 初学redux笔记,及一个最简单的redux实例
categories: 笔记 tags: react redux 前端框架 把初学redux的一些笔记写了下来 分享一个入学redux很合适的demo, 用redux实现计数器 这是从阮一峰老师git ...
- Redux 笔记详解
npm install --save redux 多数情况下,你还需要使用 React 绑定库和开发者工具. npm install --save react-redux npm install -- ...
- redux笔记 进阶
1 拆分UI组件和容器组件 import React from 'react' const AppUI = (props) =>{ return ( <div className=&quo ...
- 二刷Redux笔记
关于react的一些思考 所有的数据全部先要发送给容器,然后容器负责接受数据单后再分发数据给他下面的组件,通过props来传递,一个页面就可以相当于一个容器,容器之中就会有很多子组件,一般组件只负责接 ...
- 【原】redux异步操作学习笔记
摘要: 发觉在学习react的生态链中,react+react-router+webpack+es6+fetch等等这些都基本搞懂的差不多了,可以应用到实战当中,唯独这个redux还不能,学习redu ...
- 【原】redux学习笔记
上周学习了flux,这周研究了一下redux,其实很早之前都已经在研究他们了,只是之前一直没搞懂,最近这两周可能打通了任督二脉,都算入门了. 写博客的目的主要是做一下笔记,总结一下思路,以及和大家交流 ...
- React+Redux学习笔记:React+Redux简易开发步骤
前言 React+Redux 分为两部分: UI组件:即React组件,也叫用户自定义UI组件,用于渲染DOM 容器组件:即Redux逻辑,处理数据和业务逻辑,支持所有Redux API,参考之前的文 ...
- redux学习笔记
中文api:http://cn.redux.js.org/docs/react-redux/troubleshooting.html 3.6 Reducer Store 收到 Action 以后,必须 ...
- React Redux学习笔记
React Router React Router 使用教程 Redux中间件middleware [译]深入浅出Redux中间件 Redux学习之一:何为middleware? ES6 ES6新特性 ...
随机推荐
- java中JDBC连接数据库操作的基本步骤
JDBC基本步骤 创建一个以JDBC连接数据库的程序,包含7个步骤: 1.加载JDBC驱动程序: 在连接数据库之前,首先要加载想要连接的数据库的驱动到JVM(Java虚拟机), 这通过java.lan ...
- 使用Jenkins自动编译 .net 项目
使用Jenkins自动编译我的.net 项目 1.Jenkins是什么? Jenkins是一个可扩展的持续集成的引擎,主要用于持续自动的构建.测试软件项目 监控一些定时执行的任务. 2.安装配 ...
- vue-3-Class 与 Style 绑定
对象语法: <div v-bind:class="{ active: isActive }"></div> <div class="stat ...
- VSTO:使用C#开发Excel、Word【9】
文件背后的代码VSTO支持文档背后的代码,要求开发人员使用VSTO项目中生成的具有预连接上下文和预连接事件的类.这些类有时被称为“代码后面”类,因为它们是与特定文档或工作表相关联的代码.在Word中, ...
- :工厂模式2:抽象工厂模式--Pizza
#ifndef __INGREDIENT_H__ #define __INGREDIENT_H__ #include <iostream> using namespace std; cla ...
- 2.18 C++类与static关键字
参考:http://www.weixueyuan.net/view/6349.html 总结: 类中的成员变量或成员函数一旦与static关键字相结合,则该成员变量或成员函数就是属于类的,而不是再是属 ...
- transclude
http://jsfiddle.net/ospatil/A969Z/157/ transclude :true 允许指令内部的dom元素, 保留到 自定义指令的template属性里的含有 ng-t ...
- 装饰器-wrapper
我跟别人说我精通python,别人问我wrapper是啥,我说不知道,尼玛,原来wrapper就是装饰器,熟的不得了啊,英语真是我的克星啊. 闭包 closure 在认识装饰器之前先认识下闭包 闭包, ...
- python 读写、创建 文件的方法(必看)
python 读写.创建 文件的方法(必看) 更新时间:2016年09月12日 10:26:41 投稿:jingxian 我要评论下面小编就为大家带来一篇python 读写.创建 文件的方法(必看). ...
- python socket 编程之三:长连接、短连接以及心跳(转药师Aric的文章)
长连接:开启一个socket连接,收发完数据后,不立刻关闭连接,可以多次收发数据包. 短连接:开启一个socket连接,收发完数据后,立刻关闭连接. 心跳:长连接在没有数据通信时,定时发送数据包(心跳 ...