ckinmind / Apple Basket Redux
🍎 苹果篮子，一个微型的redux/mobx演示(附多版本)
Stars: ✭ 125
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Apple Basket Redux
Starcabinet
🎉 开源的跨平台Github Stars管理分析工具
Stars: ✭ 399 (+219.2%)
Mutual labels: redux-thunk, mobx, react-redux
React Antd Admin Template
一个基于React+Antd的后台管理模版，在线预览https://nlrx-wjc.github.io/react-antd-admin-template/
Stars: ✭ 1,022 (+717.6%)
Mutual labels: webpack, redux-thunk, react-redux
React Cloud Music
React 16.8打造精美音乐WebApp
Stars: ✭ 1,722 (+1277.6%)
Mutual labels: immutable, redux-thunk, react-redux
Reactspa
combination of react teconology stack
Stars: ✭ 911 (+628.8%)
Mutual labels: redux-thunk, react-redux
Create React App Redux
React Router, Redux, Redux Thunk & Create React App boilerplate
Stars: ✭ 885 (+608%)
Mutual labels: redux-thunk, react-redux
React Redux Quotlify
A quote browser and manager that allows one to search famous quotes and save them to a data store
Stars: ✭ 47 (-62.4%)
Mutual labels: webpack, redux-thunk
Egg React Typescript Boilerplate
Egg React TypeScript Server Side Render (SSR) / Client Side Render (CSR)
Stars: ✭ 56 (-55.2%)
Mutual labels: webpack, react-redux
Soundcloud Redux
SoundCloud API client with React • Redux • Redux-Saga
Stars: ✭ 681 (+444.8%)
Mutual labels: webpack, react-redux
React Mobx Ts Antd
A simple empty project build with react、react-router、mobx、antd in typescript.
Stars: ✭ 53 (-57.6%)
Mutual labels: webpack, mobx
Simple Universal React Redux
The simplest possible Async Universal React & Redux Boilerplate app, that works on both Mac and Windows
Stars: ✭ 58 (-53.6%)
Mutual labels: redux-thunk, react-redux
M Fe Boilerplates
Lucid & Futuristic Production Boilerplates For Frontend(Web) Apps, React/RN/Vue, with TypeScript(Optional), Webpack 4/Parcel, MobX/Redux 💫 多技术栈前端项目模板
Stars: ✭ 877 (+601.6%)
Mutual labels: webpack, mobx
Thinkful Workshop React Redux Node Mongodb Webpack2
Stars: ✭ 12 (-90.4%)
Mutual labels: webpack, react-redux
Mobx Demo
MobX port of SurviveJS - Webpack and React apps
Stars: ✭ 84 (-32.8%)
Mutual labels: webpack, mobx
Reactjs Portfolio Mern Website
My Portfolio | Full Stack MERN Application
Stars: ✭ 25 (-80%)
Mutual labels: webpack, redux-thunk
Chatinder
Unofficial desktop messaging client for Tinder.
Stars: ✭ 55 (-56%)
Mutual labels: webpack, mobx
Fe Interview
🔥🔥🔥 前端面试，独有前端面试题详解，前端面试刷题必备，Html、Css、JavaScript、Vue、React、Node、TypeScript、Webpack、算法、网络与安全、浏览器
Stars: ✭ 93 (-25.6%)
Mutual labels: webpack, react-redux
Manta
🎉 Flexible invoicing desktop app with beautiful & customizable templates.
Stars: ✭ 5,160 (+4028%)
Mutual labels: webpack, react-redux
Egg React Webpack Boilerplate
Egg React Server Side Render(SSR) / Client Sider Render(CSR)
Stars: ✭ 634 (+407.2%)
Mutual labels: webpack, react-redux
apple-basket-redux
一个微型的在react中应用redux/mobx的demo演示, 在线访问https://ckinmind.github.io/apple-basket-redux/,
技术栈
- React.js with ES6
- Redux/Mobx for predictable state
- Redux-thunk for middleware
- immutable for persistent data
- fetch for request / jQuery for ajax
- Webpack for building tool
项目说明
- 本项目来自文章《实例讲解基于 React+Redux 的前端开发流程》
- 原文章没有提供完整的实现代码，本项目是原文章的完整实现
- 摘苹果的ajax请求地址使用的hackernews的api,只是为了让请求走通，数据还是自己mock
- 最新版本增加了mobx的实现方案，通过调整src/index.js的注释来切换两种方式
- 关于
npm start运行不成功的可能解决方案, 查看issue 15 - 关于
npm install中遇到问题，phantomjs-prebuilt这个包下载失败，请使用cnpm install使用淘宝源
版本更新(查看Branch / Tags)
- [v1.5]: 增加mobx的实现方式，可以对比redux方案和mobx方案实现的优缺, 详细更新说明 issue 13
- [v1.4]: 使用fetch替换jQuery的ajax, 详细更新说明 issue 11
- [v1.3]: 增加immutable.js, 改变对象拷贝的方式, 详细更新说明 issue 8
- [v1.2]: 增加异步action的完整实现(使用redux-thunk), 详细更新说明 issue 5
- [v1.1]: 变成只有两个动作，且去除异步请求部分的演示版本, 详细更新说明 issue 2
- [v1.0]: 基本同文章提供的代码一致, 详细更新说明 issue 1
如何开始
> git clone https://github.com/ckinmind/apple-basket-redux.git
> cd apple-basket-redux
> npm install
> npm start
问题收录
- 关于mobx的使用问题, 查看 issue 14
- 异步action的问题(引入redux-thunk), 查看 issue 6
- webpack打包html中图片的问题, 查看 issue 7
- 关于immutable.js的使用, 查看 issue 9
- 关于fetch的使用, 查看 issue 10
其他应用
- gallery-by-react: 一个React实现的图片画廊
- hackernews-react: 一个React实现的HackerNews
- react-cnode: 一个React构建的cnode社区
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].