redux 学习笔记

redux

典型的web 应用程序通常是由共享数据的多个UI组件组成。通常，多个组件的任务是负责展示同一对象的不同属性。这个对象标识可随时更改的状态。在多个组件之间保持状态的一致性会是一场噩梦，特别是如果有多个通道用于更新同一个对象。

举个例子，一个带有购物车的网站。在顶部，我们用一个UI组件显示购物车中的商品数量，我们还可以用另一个UI组件，显示购物车中商品的总价。如果用户点击添加到购物车按钮，则这两个组件应该立即更新当前的数据，如果用户从购物车中删除商品，更改商品数目，使用优惠卷或者更改送货地点，则相关的UI组件都应该更新出正确得信息。可以看到，随着功能范围的扩大，一个简单的购物车将会很难保持数据同步。redux 以简单易用的方式构建复杂项目并进行维护。

什么是redux

redux 是一个流行的JavaScript框架，为应用程序提供一个可预测的状态容器。Redux 基于简化版本的 Flux 框架，Flux 是FaceBook 开发的一个框架，在标准的MVC框架中，数据可以在UI组件和存储之间双向流动，而Redux 严格限制了数据智能在一个方向上流动。

在redux 中所有的数据（比如state）被保存在一个被成为store的容器中，在一个应用程序中只能由一个。store 本质上是一个状态树，保存了所有对象的状态，任何UI组件都是可以直接从store访问特定对象的状态。要通过本地或远程组件更改状态，需要分发一个action，分发在这里意味着奖执行信息发送到store，当一个store 接受到一个action ，他将把这个action代理给相关的reducer，reducer 是一个纯函数，他可以查看之前的状态，执行一个cation 并且返回一个新的状态。

理解不变性

在我们开始实践之前，需要先了解JavaScript中不变性意味着什么。在编码中，我们编写的代码一致在改变变量的值，这是可变性，但是可变性常常会导致意外的错误。如果代码只处理原始数据类型，那么你不用担心，但是，如果在处理Arrays 和 Objects 时，则须小心执行可变操作。接下来演示不变性

• 打开一个终端并启动node

• 创建一个数组，并赋值给另一个变量

    let a = [1,2,3]
    let b = a
    b.push(4)
    a 
    // [1,2,3,4]
    b
    // [1,2,3,4]

可以看到，更新数组b也会同时改变数组a。这是因为对象和数组是引用数据类型，这意味着这样的数据类型实际上并不保存值，而是存储指向内存单元的指针。将a赋值给b，其实我们只是创建了第二个指向统一存储单元的指针。药解决这个问题，我们需要将引用的值复制到一个新的存储单元，再JavaScript中，有三种不同的实现方式。

• 使用Immutable.js创建不可变的数据结构。

• 使用JavaScript库(如Underscore和Lodash)来执行不可变的操作。

• 使用ES6方法执行不可变操作。

    let a = [1,2,3]
    let b = Object.assign([], a)
    let c = [...a, 4]
    b.push(4)
    a
    // [1,2,3]
    b
    // [1,2,3,4]
    c
    // [1,2,3,4]

配置Redux

配置redux 开发环境最快的方法是使用 create-react-app 工具。在开始之前，确保已经安装并更新了node.js,npm,yarn。生成一个redux-shopping-cart项目并且安装redux

   npx create-react-app my-app
   cd my-app
   yarn add redux
   yarn start

首先，删除src 文件夹中除index.js 以外的所有文件。打开index.js, 删除代码，输入以下内容

import { createStore } from 'redux'
const reducer = function(state=[], action) {
    return state
}
const store = createStore(reducer)

1. 首先，从redux 包中引入createStore()方法

2. 创建了一个名为reducer 的方法。第一个参数state是当前保存在store中的数据，第二个参数action 是一个容器，用于：

   • type: 一个简单的字符串常量，例如：ADD，DELETE，UPDATE

   • payload: 用于更新状态的数据。

3. 创建一个Redux 存储区，它只能使用reducer作为参数来构造。存储在Redyx存储区中的数据可以直接被访问，但是只能通过提供的reducer进行更新。

让我们更进一步。目前我们创建的reducer是通用的。它的名字没有描述它的用途。那么我们如何使用多个reducer呢？我们将用到Redux包中提供的combineReducers函数。修改代码如下：

// src/index.js

import { createStore } from "redux";
import { combineReducers } from 'redux';

const productsReducer = function(state=[], action) {
  return state;
}

const cartReducer = function(state=[], action) {
  return state;
}

const allReducers = {
  products: productsReducer,
  shoppingCart: cartReducer
}

const rootReducer = combineReducers(allReducers);

let store = createStore(rootReducer);

整个index.js 文件

import {createStore, combineReducers} from 'redux'

// 初始化数据
const initialState = {
    cart: [
        {
            product: 'bread 700g',
            quantity: 2,
            unitCost: 90
        },
        {
            product: 'milk 700ml',
            quantity: 2,
            unitCost: 90
        }
    ]
}

const ADD_TO_CART = 'ADD_TO_CART'

const productsReducer = function(state = [], action){
    return state
}
const cartReducer = function(state=initialState, action) {
    switch(action.type) {
        case ADD_TO_CART: {
            return {
                ...state,
                cart: [...state.cart, action.payload]
            }
        }
        default: 
        return state
    }
}
const allReducers = {
    products: productsReducer,
    shoppingCart: cartReducer
}
// 使用combineReducers 组合多个reducer
const rootReducer = combineReducers(allReducers)
// 创建store 实例
const store = createStore(rootReducer)
// 订阅监听每次数据变化
let unsubscribe = store.subscribe(()=>{
    console.log(store.getState())
})

function addToCart (product, quantity, unitCost) {
    return {
        type: ADD_TO_CART,
        payload: { product, quantity, unitCost}
    }
}
// 分发指令，改变状态
store.dispatch(addToCart('coffee 50gm', 1, 250))
store.dispatch(addToCart('Flour 1kg', 2, 220))
store.dispatch(addToCart('Juice 2L', 2, 110))

unsubscribe();

console.log('initial state: ' + store.getState())

组织 Redux 代码

index.js 中的代码逐渐变得冗余，重新组织文件结构。

// cart-actions.js
export const ADD_TO_CART = 'ADD_TO_CART'
export const UPDATE_CART = 'UPDATE_CART'
export const DELETE_FROM_CART = 'DELETE_FROM_CART'

export function addToCart(product, quantity, unitCost) {
    return {
        type: ADD_TO_CART,
        payload: {product, quantity, unitCost}
    }
}

export function updateCart(product, quantity, unitCost) {
    return {
        type: UPDATE_CART,
        payload: {product, quantity, unitCost}
    }
}

export function deleteFromCart(product) {
    return {
        type: DELETE_FROM_CART,
        payload: {product}
    }
}

// products-actions.js
export const ADD_TO_PRODUCT = 'ADD_TO_PRODUCT'
export const UPDATE_PRODUCT = 'UPDATE_PRODUCT'
export const DELETE_PRODUCT = 'DELETE_PRODUCT'

export function addToProduct(name, price, storageNum){
    return {
        type: ADD_TO_PRODUCT,
        payload: {name, price, storageNum}
    }
}

export function updateProduct(name, price, storageNum) {
    return {
        type: UPDATE_PRODUCT,
        payload: {name, price, storageNum}
    }
}

export function deleteProduct(product) {
    return {
        type: DELETE_PRODUCT,
        payload: {product}
    }
}

// cart-reducer.js
import { ADD_TO_CART, UPDATE_CART, DELETE_FROM_CART } from '../actions/cart-actions'

const initialState = {
    cart: [
        {
            product: 'bread 700g',
            quantity: 2,
            unitCost: 90
        },
        {
            product: 'milk 500ml',
            quantity: 1,
            unitCost: 30
        },
        {
            product: 'coffee 300ml',
            quantity: 2,
            unitCost: 180
        }
    ]
}

export default function (state = initialState, action) {
    switch (action.type) {
        case ADD_TO_CART: {
            return {
                ...state,
                cart: [...state.cart, action.payload]
            }
        }
        case UPDATE_CART: {
            return {
                ...state,
                cart: state.cart.map(item => item.product === action.payload.product ? action.payload: item)
            }
        }
        case DELETE_FROM_CART: {
            return {
                ...state,
                cart: state.cart.filter(item => item.product !== action.payload.product)
            }
        }
        default:
            return state
    }
}

// products-reducer.js
import { ADD_TO_PRODUCT, UPDATE_PRODUCT, DELETE_PRODUCT } from '../actions/products-actions'
const initialState = {
    products: [
        {
            name: '冰激凌',
            price: 35,
            storageNum: 100,
        },
        {
            name: '锅巴',
            price: 5,
            storageNum: 100
        }
    ],
}

export default function (state = initialState, action) {
    switch(action.type){
        case ADD_TO_PRODUCT: {
            return {
                ...state,
                products: [...state.products, action.payload]
            }
        }
        case UPDATE_PRODUCT: {
            return {
                ...state,
                products: state.products.map(item => item.name === action.payload.name ? action.payload: item)
            }
        }
        case DELETE_PRODUCT: {
            return {
                ...state,
                products: state.products.filter(item => item.name !== action.payload.name)
            }
        }
        default: {
            return state
        }
    }
}

// reducers/index.js
import {combineReducers} from 'redux'
import productsReducer from './products-reducer'
import carReducer from './cart-reducer'

const allReducers = {
    products: productsReducer,
    shoppingCart: carReducer
}

const rootReducer = combineReducers(allReducers)
export default rootReducer

// src/store.js
import { createStore } from 'redux'
import rootReducer from './reducers'

let store = createStore(rootReducer)
export default store

// src/index.js
import store from './store.js'
import { addToCart, updateCart, deleteFromCart } from './actions/cart-actions'
import { addToProduct, updateProduct, deleteProduct } from './actions/products-actions'
console.log("initial state:", store.getState())

// 订阅监听每次值变化
let unsubscribe = store.subscribe(() => {
    console.log(store.getState())
})

// 新增
store.dispatch(addToCart('Flour 1kg', 2, 100))
store.dispatch(addToCart('Juice 2L', 1, 200))
// 修改
store.dispatch(updateCart('Flour 1kg', 5, 110))
// 删除
store.dispatch(deleteFromCart('coffee 300ml'))

store.dispatch(addToProduct('辣条', 10, 100))
store.dispatch(addToProduct('酸奶', 13, 150))
store.dispatch(addToProduct('方便面', 10, 100))

store.dispatch(updateProduct('辣条', 100, 6))
store.dispatch(deleteProduct('方便面'))

store.dispatch(addToProduct('酸辣粉', 60, 8))
unsubscribe()