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. java中JDBC连接数据库操作的基本步骤

    JDBC基本步骤 创建一个以JDBC连接数据库的程序,包含7个步骤: 1.加载JDBC驱动程序: 在连接数据库之前,首先要加载想要连接的数据库的驱动到JVM(Java虚拟机), 这通过java.lan ...

  2. 使用Jenkins自动编译 .net 项目

    使用Jenkins自动编译我的.net 项目   1.Jenkins是什么? Jenkins是一个可扩展的持续集成的引擎,主要用于持续自动的构建.测试软件项目 监控一些定时执行的任务.   2.安装配 ...

  3. vue-3-Class 与 Style 绑定

    对象语法: <div v-bind:class="{ active: isActive }"></div> <div class="stat ...

  4. VSTO:使用C#开发Excel、Word【9】

    文件背后的代码VSTO支持文档背后的代码,要求开发人员使用VSTO项目中生成的具有预连接上下文和预连接事件的类.这些类有时被称为“代码后面”类,因为它们是与特定文档或工作表相关联的代码.在Word中, ...

  5. :工厂模式2:抽象工厂模式--Pizza

    #ifndef __INGREDIENT_H__ #define __INGREDIENT_H__ #include <iostream> using namespace std; cla ...

  6. 2.18 C++类与static关键字

    参考:http://www.weixueyuan.net/view/6349.html 总结: 类中的成员变量或成员函数一旦与static关键字相结合,则该成员变量或成员函数就是属于类的,而不是再是属 ...

  7. transclude

    http://jsfiddle.net/ospatil/A969Z/157/ transclude :true  允许指令内部的dom元素, 保留到 自定义指令的template属性里的含有 ng-t ...

  8. 装饰器-wrapper

    我跟别人说我精通python,别人问我wrapper是啥,我说不知道,尼玛,原来wrapper就是装饰器,熟的不得了啊,英语真是我的克星啊. 闭包 closure 在认识装饰器之前先认识下闭包 闭包, ...

  9. python 读写、创建 文件的方法(必看)

    python 读写.创建 文件的方法(必看) 更新时间:2016年09月12日 10:26:41 投稿:jingxian 我要评论下面小编就为大家带来一篇python 读写.创建 文件的方法(必看). ...

  10. python socket 编程之三:长连接、短连接以及心跳(转药师Aric的文章)

    长连接:开启一个socket连接,收发完数据后,不立刻关闭连接,可以多次收发数据包. 短连接:开启一个socket连接,收发完数据后,立刻关闭连接. 心跳:长连接在没有数据通信时,定时发送数据包(心跳 ...