React + Redux示例,实现商品增删改

目录结构

1.项目搭建

1.1 使用create-react-app react_redux创建项目

1.2 安装使用redux需要的依赖 npm install redux react-redux redux-devtools

2.添加一些文件夹

2.1创建储存常量的文件夹添加cart.js

export const ADD_CART = "ADD_CART"
export const UPDATE_CART = 'UPDATE_CART';
export const DELETE_FROM_CART = 'DELETE_FROM_CART';

2.2创建action文件夹添加cart.js

import { ADD_CART, UPDATE_CART, DELETE_FROM_CART } from '../contants/cart'
export const addCart = function (product, quantity, unitCost) {
return {
type: ADD_CART,
payload: { product, quantity, unitCost }
}
}
export const updateCart = function (product, quantity, unitCost) {
return {
type: UPDATE_CART,
payload: { product, quantity, unitCost }
}
}
export const deleteFromCart = function (product) {
return {
type: DELETE_FROM_CART,
payload: { product }
}
}

2.3创建reducers文件夹

2.3.1 cart.js

import { ADD_CART, UPDATE_CART, DELETE_FROM_CART } from '../contants/cart'
const initialState = {
shops: [
{
product: '面包',
quantity: 2,
unitCost: 90
},
{
product: '牛奶',
quantity: 1,
unitCost: 47
}
]
}
const cartReducer = function (state = initialState, action) {
switch (action.type) {
case ADD_CART: {
return {
...state,
shops: [...state.shops, action.payload]
}
} case UPDATE_CART: {
return {
...state,
shops: state.shops.map(item => {
item = item.product === action.payload.product ? action.payload : item
return item
})
}
} case DELETE_FROM_CART: {
return {
...state,
shops: state.shops.filter(item => item.product !== action.payload.product)
}
} default:
return state
}
} export default cartReducer

2.3.2productsReducer.js

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

2.3.3index.js

import { combineReducers } from 'redux'
import cartReducer from './cart'
import productsReducer from './productsReducer' const allReducers = {
cart: cartReducer,
products: productsReducer
} const rootReducer = combineReducers(allReducers)//合并reducer
export default rootReducer

2.4创建store

import { createStore } from 'redux'
import rootReducers from '../reducers' import { composeWithDevTools } from 'redux-devtools-extension';
// composeWithDevTools 在控制台可以查看数据
let store = createStore(rootReducers, composeWithDevTools()) console.log("initial state: ", store.getState()); export default store;

3.修改src下index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import store from './store/index'
import { Provider } from 'react-redux' ReactDOM.render(<Provider store={store}>
<App />
</Provider>, document.getElementById('root')); // If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

4.修改App.js

import React, { Component } from 'react';
import { connect } from 'react-redux'
import './App.css';
import * as cartActions from './actions/cart' class App extends Component {
constructor(props) {
super(props)
}
render() {
let { shops } = this.props.cart;
return (
<div className="App">
<ul>
{shops.map((s, index) => {
return <li key={index}>{s.product}===>{s.quantity}===>{s.unitCost}</li>
})}
</ul>
<hr />
<button onClick={() => this.props.addCart()} > 增加商品</button>
<button onClick={() => this.props.updateCart()} > 修改商品</button>
<button onClick={() => this.props.deleteCart()} > 删除商品</button>
</div>
)
}
} function getState(state) {
return {
cart: state.cart
}
} function getDispatch(dispatch) {
return {
addCart: () => dispatch(cartActions.addCart("鱼香肉丝", 1, 20)),
updateCart: () => dispatch(cartActions.updateCart("鱼香肉丝", 2, 50)),
deleteCart: () => dispatch(cartActions.deleteFromCart("鱼香肉丝"))
}
} export default connect(getState, getDispatch)(App);

初次使用redux做的小demo,记录一下

react+redux项目搭建及示例的更多相关文章

  1. Immutable.js 以及在 react+redux 项目中的实践

    来自一位美团大牛的分享,相信可以帮助到你. 原文链接:https://juejin.im/post/5948985ea0bb9f006bed7472?utm_source=tuicool&ut ...

  2. 用react+redux+webpack搭建项目一些疑惑

    --save-dev开发用 例如:webpack --save开发和发布用 例如:react

  3. node.js+ react + redux 环境搭建

    1.安装node.js 2. yarn init: 初始化,主要包含以下条目 name: 项目名 version: 版本号 description: 项目简要描述 entry point: 文件入口, ...

  4. React项目搭建与部署

    React项目搭建与部署 一,介绍与需求 1.1,介绍 1.1.1,React简介 React 是一个用于构建用户界面的 JAVASCRIPT 库. React主要用于构建UI,很多人认为 React ...

  5. react + redux 完整的项目,同时写一下个人感悟

    先附上项目源码地址和原文章地址:https://github.com/bailicangd... 做React需要会什么? react的功能其实很单一,主要负责渲染的功能,现有的框架,比如angula ...

  6. React:redux+router4搭建应用骨架

    可能是短期内关于react的对后一篇笔记.假设读者对redux和router4有基本了解. 缘由: 现在网上很多关于react+redux的文章都是沿用传统的文件组织形式,即: |--componen ...

  7. react 创建项目 sass router redux

    ​ 创建项目第一步 基本搭建 在创建之前,需要有一个git 仓库,我们要把项目搭建到git 中 目录介绍 cd 到某个盘 mkdir workspace 创建workspace文件夹 cd works ...

  8. React+Redux开发实战项目【美团App】,没你想的那么难

    README.md 前言 开始学习React的时候,在网上找了一些文章,读了官网的一些文档,后来觉得React上手还是蛮简单的, 然后就在网上找了一个React实战的练手项目,个人学完之后觉得这个项目 ...

  9. 用yeoman搭建react画廊项目笔记

    1.安装yeoman   npm install yo -g yo --version //检测 yeoman版本,成功显示版本号,则安装成功 2.到yeoman官网 http://yeoman.io ...

随机推荐

  1. Git常用命令【ZeyFra】

    // 账户设置 git config --global user.name "ZeyFra" git config --global user.email "zeyfra ...

  2. 【webSokect】基于django Channels的简单实现

    # settings.py: INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.con ...

  3. 剑指offer刷题(算法类_2)

    排序 035-数组中的逆序对(归并排序) 题目描述 题解 代码 复杂度 029-最小的K个数(堆排序) 题目描述 题解 代码 复杂度 029-最小的K个数(快速排序) 题目描述 题解 代码 复杂度 位 ...

  4. win7-64位 jdk安装

    1.jdk安装 jdk安装主要是进行jdk以及jre安装,注意jre需要安装到一个空文件夹内即可. 官网地址:http://www.oracle.com/technetwork/java/javase ...

  5. this.getClass().getResource("") url path file 区别

    首先注意 "/word/appointDismiss.docx" 前面一定要加 /,有一次我就是忘记加/ 查了半天错, 不能写成 "word/appointDismiss ...

  6. 老板让只懂Java基本语法的我,基于AQS实现一个锁

    10 点整,我到了公司,又成为全组最后一个到的员工. 正准备刷刷手机摸摸鱼,看见老板神秘兮兮地走了过来. 老板:闪客呀,你写个工具,基于 AQS 实现一个锁,给咱们组其他开发用 我:哦好的 老板:你多 ...

  7. Python_多进程_pool进程池

    多进程典型案例: 1.将子进程的进程名作为列表中的元素,在父进程中遍历(异步)执行 #coding: utf-8 from multiprocessing import Pool import os, ...

  8. kali 系列学习07-攻击之密码生成

    比较理想的字典是拖库字典,比如CSDN字典,如果要生成字典,可以使用Crunch 和 rtgen 两个工具, 一.密码生成 1.Crunch (1)启动crunch命令.执行命令如下所示. #crun ...

  9. Python:利用Entrez库筛选下载PubMed文献摘要

    一个不是学生物的孩子来搞生物,当真是变成了一块废铁啊,但也是让我体会到了一把生物信息的力量. 废话不多说,开整! 任务:快速高效从PubMed上下载满足条件的文献PMID.标题(TI).摘要(AB). ...

  10. 面试必看!凭借着这份 MySQL 高频面试题,我拿到了京东,字节的offer!

    前言 本文主要受众为开发人员,所以不涉及到MySQL的服务部署等操作,且内容较多,大家准备好耐心和瓜子矿泉水. 前一阵系统的学习了一下MySQL,也有一些实际操作经验,偶然看到一篇和MySQL相关的面 ...