废话不多说,先上一张图

首先记住redux设计思想

  Web应用是一个转态机,视图与转态是一一对应的

  所有的转态,保存在一个对象里

1.store

  存储数据的容器,整个应用只有一个state,Redux提供createStore这个函数生成Store,Redux store保存了根reducer返回的完整state树

 const { createStore } = require('redux')
//创建store的时候就要把reducer放进去,reducer改state,state写在reducer里
//store提供三个方法
/*
store.getState() 获取state
store.dispatch(action) 更新state
store.subscribe(listener) 注册监听器
*/
const store = createStore(reducer)
console.log(store)
// subscript是个订阅函数,他在状态发生变化的时候,自动调用
store.subscribe(() => {
console.log(store.getState())
}) // 调用store.dispatch, 会再次执行reducer
setInterval(() => {
store.dispatch({
type: 'increment',
//负载,载荷
payload: 4
})
}, 1000)

2.State

  Store对象包含所有数据。如果想的得到某个时点的数据,就要对Store生成快照。这种时点的数据集合,就叫State。当前时刻的State,可以通过store.getState()拿到。

  一个State对应一个View,只要State相同,View就相同。

3.Action

  View通过Action导致State发生变化

  store.dispatch()是View发出Action的唯一方法。携带一个Action对象作为参数,将它发送出去。

  Action是一个对象。其中的type属性是必须的,表示Action的名称。payload是它携带的信息。

  可以这样理解,Action描述当前发生的事情。改变State的唯一办法,就是使用Action。他会运送数据到Store。

  Action Creator: view要发送多少种消息,就会有多少种Action。通过Action Creator函数来生成Action

4.reducer

  reducer就是实现(state,action)=> newState的纯函数--正真处理state的地方。不修改原来的state,而是通过返回新的state的方式去修改。

  纯函数  同样的输入一定会有同样的输出

const reducer = (state = defaultState, action) => {
// redux会在开始的时候执行一次reducer, action.type = @@redux/INITc.v.p.a.u.f
if (action.type === 'increment') {
return {
//state = 1 直接修改state不允许 state + 1 可以
//state定义对象,在这里返回的时候也要返回对象
count: state.count + action.payload
}
}
return state
}

撸到这里是不是有点云里雾里,

下面来看一个redux实现的加减栗子

Counter.js

import React, { Component } from 'react'

import store from './store'

class Counter extends Component {
constructor (props) {
super(props)
this.increment = this.increment.bind(this)
this.decrement = this.decrement.bind(this) this.state = {
count: store.getState()
} store.subscribe(this.changeCount.bind(this))
}
render () {
return (
<div>
<button onClick={this.decrement}>-</button>
{ this.state.count }
<button onClick={this.increment}>+</button>
</div>
)
}
increment () {
store.dispatch({
type: 'increment'
})
}
decrement () {
store.dispatch({
type: 'decrement'
})
} changeCount () {
this.setState({
count: store.getState()
})
}
} export default Counter

  store.js

import { createStore } from 'redux'

const defaultState = 1

const reducer = (state = defaultState, action) => {
switch (action.type) {
case 'increment' :
return state + 1
case 'decrement' :
return state - 1
default :
return state
}
} const store = createStore(reducer) export default store

初识redux走向redux-react的更多相关文章

  1. Redux:with React(一)

    作者数次强调,redux和React没有关系(明明当初就是为了管理react的state才弄出来的吧),它可以和其他插件如 Angular, Ember, jQuery一起使用.好啦好啦知道啦.Red ...

  2. [转] What is the point of redux when using react?

    As I am sure you have heard a bunch of times, by now, React is the V in MVC. I think you can think o ...

  3. [Redux] Filtering Redux State with React Router Params

    We will learn how adding React Router shifts the balance of responsibilities, and how the components ...

  4. [Redux] Navigating with React Router <Link>

    We will learn how to change the address bar using a component from React Router. In Root.js: We need ...

  5. 25.redux回顾,redux中的action函数异步

    回顾:Redux: 类似于 Vuex 概念:store/reducer/action action:动作 {type,.....} 一定要有type 其他属性不做限制 reducer:通过计算产生st ...

  6. React-安装和配置redux调试工具Redux DevTools

    chrome扩展程序里搜索Redux DevTools进行安装 新建store的时候,进行如下配置. import { createStore, applyMiddleware ,compose} f ...

  7. Redux 和 Redux thunk 理解

    1: state 就像 model { todos: [{ text: 'Eat food', completed: true }, { text: 'Exercise', completed: fa ...

  8. [Redux] Understand Redux Higher Order Reducers

    Higher Order Reducers are simple reducer factories, that take a reducer as an argument and return a ...

  9. 手把手教你撸一套Redux(Redux源码解读)

    Redux 版本:3.7.2 Redux 是 JavaScript 状态容器,提供可预测化的状态管理. 说白了Redux就是一个数据存储工具,所以数据基础模型有get方法,set方法以及数据改变后通知 ...

随机推荐

  1. Python基础之 函数名,闭包,和迭代器

    1.函数名作用 函数名本质上就是函数的内存地址或对象. 1.可以被引用 2.可以被当作容器类型的元素 3.可以当作函数的参数和返回值 4.如果记不住的话,那就记住一句话,就当普通变量用 2.闭包 什么 ...

  2. Linux下Netty实现高性能UDP服务(SO_REUSEPORT)

    参考: https://www.jianshu.com/p/61df929aa98b SO_REUSEPORT学习笔记:http://www.blogjava.net/yongboy/archive/ ...

  3. 20.C# 创建自己的泛型类型

    1.定义泛型类 可以使用以下语法创建泛型类,T可以是任意符合C#标识符命名规范的任意标识符 class MyGenericClass<T> { //.... } 泛型类可以包含任意多个类型 ...

  4. windows----------如何禁用PC端微信的开机启动

    1.开始菜单--->运行--->输入msconfig 2.如下图,然后点击启动 3.打开任务管理器 4.右键wechat,然后禁用.

  5. ACM-ICPC 2018 南京赛区网络预赛(A, J)

    A  签到题 Alice, a student of grade 666, is thinking about an Olympian Math problem, but she feels so d ...

  6. Xamarin.Forms踩坑集锦(持续更新)

    1.ImageButton控件 问题:ImageButton在切换图片的时候,图片大小会改变. Github Issue:ImageButton changes image size · Issue ...

  7. 莫名奇妙虚拟机 ip addr 不显示 ip 地址,连不上网络

    CentOS7 Failed to start LSB: Bring up/down networking. 说是mac地址不对.其实,本人并没有配置mac,按理说用的默认的.之前一直是可以正常工作的 ...

  8. CAN自收自发问题小结

    2011-12-02 21:59:23 流程图: CAN自收自发问题小结 1,地址如何确定?  答:51的片外扩展地址,R/W脚的电平会根据代码自动更改,不需要设置.    参考 单片机的外部存储器的 ...

  9. left join on +多条件与where区别

    left join on +多条件与where区别 重点 先匹配,再筛选where条件. 本文将通过几个例子说明两者的差别. 1. 单个条件 select * from product a left ...

  10. MySQL触发器在建立时,报语法错的问题

    delimiter $$ create trigger trg_delete_on_users before DELETE on users for each row begin delete fro ...