Redux入门教程(快速上手)_day_01

接下来也只是分享一些小案例来让你好好理解该如何使用Redux
详情具体可以参考官方文档:https://www.redux.org.cn/

学习前提

开始之前确保你的设备已经安装:

  • Node.js
  • npm或者yarn(本人自己用到的是yarn)

什么是Redux

用官方文档的话来说,就是Redux 是 JavaScript 状态容器,提供可预测化的状态管理。在标准的MVC框架中,数据可以在UI组件和存储之间双向流动,而Redux严格限制了数据只能在一个方向上流动。 见下图:
Redux入门教程(快速上手)_day_01
---现在看可能对于刚接触者一脸蒙××,等到了我们实现了一个小demo我们再回过头来理解可能会更加清晰

用了会怎么样

可以让你构建一致化的应用,运行于不同的环境(客户端、服务器、原生应用),并且易于测试。不仅于此,它还提供 超爽的开发体验。总得来说就是实现项目工程化

本次通过一个购物车的小栗子方便来理解redux

配置Redux

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

create-react-app redux-shopping-cart

cd redux-shopping-cart
yarn add redux # 或者npm install redux```

首先删除src文件下除index.js以外的文件,以及删除index.js所有代码,插入以下内容:

import { createStore } from "redux";
//state:存储数据 action:容器

const reducer = function(state, action) {
  return state;
}

const store = createStore(reducer);//创建一个redux存储区`
注意这里我们起初state是没有数据的,所以要让他成为空数组

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

如果你有多个redux怎么办?我们将用到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);

接下来我们为reducer定义一些初始数据?

const initialState = {
    cart: [
      {
        product: 'bread 700g',
        quantity: 2,
        unitCost: 90
      },
      {
        product: 'milk 500ml',
        quantity: 1,
        unitCost: 47
      }
    ]
  }
const cartReducer = function(state=initialState, action) {
  return state;
}
let store = createStore(rootReducer);

console.log("initial state: ", store.getState());//获取state

我们在终端输入命令npm start或yarn start,就能看到state的输出,如下图:
Redux入门教程(快速上手)_day_01
我们来定义商品的增加,删除,修改的操作(action),先写增加:

const ADD_TO_CART = 'ADD_TO_CART';

const cartReducer = function(state=initialState, action) {
  switch (action.type) {
    case ADD_TO_CART: {
      return {
        ...state,
        cart: [...state.cart, action.payload]//将action.payload中的数据与state合并成新的state
      }
    }

    default:
      return state;
  }
}

接下来是写我们的action:

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

定义监听事件,监听state的改变:

let unsubscribe = store.subscribe(() =>
  console.log(store.getState())
);

向store添加数据:

store.dispatch(addToCart('Coffee 500gm', 1, 250));
store.dispatch(addToCart('Flour 1kg', 2, 110));
store.dispatch(addToCart('Juice 2L', 1, 250));

接下是取消监听:

unsubscribe();

下面是整个index.js文件:

// src/index.js

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

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

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

const ADD_TO_CART = 'ADD_TO_CART';

const cartReducer = function(state=initialState, action) {
  switch (action.type) {
    case ADD_TO_CART: {
      return {
        ...state,
        cart: [...state.cart, action.payload]
      }
    }

    default:
      return state;
  }
}

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

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

const rootReducer = combineReducers(allReducers);

let store = createStore(rootReducer);

console.log("initial state: ", store.getState());

let unsubscribe = store.subscribe(() =>
  console.log(store.getState())
);

store.dispatch(addToCart('Coffee 500gm', 1, 250));
store.dispatch(addToCart('Flour 1kg', 2, 110));
store.dispatch(addToCart('Juice 2L', 1, 250));

unsubscribe();

保存代码后,Chrome会自动刷新。可以在控制台中确认新的商品已经添加了:
Redux入门教程(快速上手)_day_01

回头总结一下:
redux的一个工作流程是:(action)发送请求-->传入到(store)-->(Reducers)指定了应用状态的变化如何响应 actions 并发送到 store 的

这样看是不是发现index.js的代码很多很复杂,那如何组织Redux代码呢?先休息一会

相关推荐