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中调用:


import store from './store'
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
})

然后在组件中定义:

 store.dispatch(changeInputValue(e.target.value));

redux笔记1的更多相关文章

  1. 初学redux笔记,及一个最简单的redux实例

    categories: 笔记 tags: react redux 前端框架 把初学redux的一些笔记写了下来 分享一个入学redux很合适的demo, 用redux实现计数器 这是从阮一峰老师git ...

  2. Redux 笔记详解

    npm install --save redux 多数情况下,你还需要使用 React 绑定库和开发者工具. npm install --save react-redux npm install -- ...

  3. redux笔记 进阶

    1 拆分UI组件和容器组件 import React from 'react' const AppUI = (props) =>{ return ( <div className=&quo ...

  4. 二刷Redux笔记

    关于react的一些思考 所有的数据全部先要发送给容器,然后容器负责接受数据单后再分发数据给他下面的组件,通过props来传递,一个页面就可以相当于一个容器,容器之中就会有很多子组件,一般组件只负责接 ...

  5. 【原】redux异步操作学习笔记

    摘要: 发觉在学习react的生态链中,react+react-router+webpack+es6+fetch等等这些都基本搞懂的差不多了,可以应用到实战当中,唯独这个redux还不能,学习redu ...

  6. 【原】redux学习笔记

    上周学习了flux,这周研究了一下redux,其实很早之前都已经在研究他们了,只是之前一直没搞懂,最近这两周可能打通了任督二脉,都算入门了. 写博客的目的主要是做一下笔记,总结一下思路,以及和大家交流 ...

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

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

  8. redux学习笔记

    中文api:http://cn.redux.js.org/docs/react-redux/troubleshooting.html 3.6 Reducer Store 收到 Action 以后,必须 ...

  9. React Redux学习笔记

    React Router React Router 使用教程 Redux中间件middleware [译]深入浅出Redux中间件 Redux学习之一:何为middleware? ES6 ES6新特性 ...

随机推荐

  1. MySQL mysql server与存储引擎

    mysql server系统架构 逻辑模块组成: mysql逻辑模块可以分为两层架构,第一层是sql layer主要包括权限判断.sql解析.执行计划优化.query cache的处理等:第二层是存储 ...

  2. jenkins使用jacoco插件检测代码覆盖率(八)

    代码覆盖率:类覆盖,方法覆盖,行覆盖,指令覆盖……(简而言之,就是判断有没有被执行) 覆盖率 = 已经执行的代码 / 总代码 (1)创建maven项目,配置pom.xml如下 pom.xml < ...

  3. mac以及centos下安装Elasticsearch 以及权限管理插件

    Elasticsearch安装(提前系统需要安装java环境)mac安装 brew install elasticsearch centos安装 下载ElasticSearch安装包,https:// ...

  4. tomcat原理详解

    tomcat的启动是通过Bootstrap类的main方法(tomcat6开始也可以直接通过Catlina的main启动) Bootstrap的启动 Bootstrap的main方法先new了一个自己 ...

  5. jvm的基本结构以及各部分详解(转)

    原文链接:https://www.cnblogs.com/zwbg/p/6194470.html 1.java虚拟机的基本结构 图: 1.类加载器子系统从文件系统或者网络中加载Class信息,类信息( ...

  6. pssac plot

    for multi-waveforms with different colors: R-Xmin/-Xmax/Ymin/Ymax -Ba/b, a: x delta; b:y delta -MYma ...

  7. HTML 表单中的验证

    凡要验证格式的元素均需绑定datatype属性,datatype可选值内置有10类,用来指定不同的验证格式. 如果还不能满足您的验证需求,可以传入自定义datatype,自定义datatype是一个非 ...

  8. nginx 更改用户组

    为什么要更改 Nginx 服务的默认用户:就像更改 ssh 的默认 22 端口一样,增加安全性,Nginx 服务的默认用户是 nobody ,我们更改为 nginx 1) 添加 nginx 用户 us ...

  9. 使用zabbix-java-gateway可以通过该网关来监听多个JVM

    我们知道监控主机和网络性能指标情况可以使用zabbix很好解决,分析起来也很方便,Zabbix主要功能: - 自动发现服务器与网络设备 - 分布式监视以及WEB集中管理功能 - 可以无agent监视 ...

  10. JavaScript , js 上下文(this 的指代)

    上下文 代表 this 变量的值, 以及 它的 指代; 它决定一个函数怎么被调用; 当一个函数作为一个对象的方法被调用的时候, this总是指向 调用这个方法的对象. ----- 1 ,情况一: 字面 ...