Total Pageviews

Sunday 4 September 2016

redux教程和资料

redux-tutorial
This repository contains a step by step tutorial to help grasp flux and more specifically Redux.
The official and very exhaustive Redux documentation is available here and should be your number one source of truth regarding Redux. The present tutorial will only offer you an introduction to flux concepts through Redux use. For further or more detailed info, please refer to the Redux documentation.

Prerequisites
It is required for you to know a bit of ES6 and ES7 (Object Spread) to correctly understand some of the examples given in this repo. Also be aware that this tutorial targets redux 3.0.2 and react-redux 4.0.0.

Clone the repository
git clone https://github.com/happypoulp/redux-tutorial.git

Move into repository
cd redux-tutorial

Install dependencies
npm install

Browse the tutorial
This tutorial is split into a sequence of javascript files that are intended to be read in order.
Start with the first tutorial: Introduction

Run an example
Being real js files, each example can be run to verify that it works as intended or to do your own experiments:
npm run example 01_simple-action-creator.js

Enjoy!

from https://github.com/happypoulp/redux-tutorial
-------------

Awesome list of Redux examples and middlewares.
Awesome Redux 
List of repositories which use Redux

Redux

Documentation of Redux

Documentation of Redux(Simple Chinese version)

Unofficial documentation of Redux(Russian version) (Work in progress)

Documentation of Redux(Traditional Chinese version)

Documentation of Redux(Japanese version) (Work in progress)

Documentation of Redux(Portuguese version) (Work in progress)

Documentation of Redux(Spanish version) (Work in progress)

Documentation of Redux(Korean version)
Predictable state container for JavaScript apps

Marks

Presentations


Resources


Articles And Tutorials


Boilerplate


React Native - A framework for building native apps using React


React - A JavaScript library for building user interfaces


Examples


Similar libraries


Deku - Functional view library for building UI components as an alternative to React


Incremental DOM - Incremental DOM is a library for building up DOM trees and updating them in-place when data changes


WinJS - Windows Library for JavaScript


Angular - HTML enhanced for web apps


Angular 2 - One framework. Mobile and desktop


Vue - A library for building modern web interfaces


Polymer - Build modern apps using web components


Ember - A framework for creating ambitious web applications
  • Examples


Meteor - Build apps that are a delight to use, faster than you ever thought possible


Mithril - A Javascript Framework for Building Brilliant Applications


Backbone - Give your JS App some Backbone with Models, Views, Collections, and Events


Aurelia - is a next gen JavaScript client framework for mobile, desktop and web that leverages simple conventions to empower your creativity


Riot - A React-like user interface micro-library

Electron - Build cross platform desktop apps with web technologies


Chrome Extensions

Ruby on Rails Resources

Other languages
from https://github.com/xgrommx/awesome-redux
-----------------

Curated tutorial and resource links I've collected on React, Redux, ES6, and more.
React/Redux Links
Curated tutorial and resource links I've collected on React, Redux, ES6, and more, meant to be a collection of high-quality articles and resources for someone who wants to learn about the React-Redux ecosystem. Not quite "awesome", but hopefully useful as a starting point I can give to others. Suggestions welcome.
Another important resource is the Reactiflux community on Discord, which has chat channels dedicated to discussion of React, Redux, and other related technologies. There's always a number of people hanging out and answering questions, and it's a great place to ask questions and learn. The invite link is at https://www.reactiflux.com.
You might also want to check out my categorized list of Redux-related addons, libraries, and utilities, at Redux Ecosystem Links. Also see Community Resources for links to other links lists, podcasts, and email newsletters.

Table of Contents

Getting Started

Basic Tutorials

Intermediate Concepts

Advanced Topics

Guidelines, Comparisons, and Discussion

Best of the Best / Suggested Reading List
All of the links in this collection are worth reading, but there's obviously a LOT of them. Here's a "best-of" list to get you started:
from https://github.com/markerikson/react-redux-links
------------------


Redux 中文文档 http://cn.redux.js.org/
README.md

Redux 中文文档 

在线 Gitbook 地址：http://cn.redux.js.org/
英文原版：http://redux.js.org/
学了这个还不尽兴？推荐极精简的 Redux Tutorial 教程
React 核心开发者写的 React 设计思想
⬇️ 离线下载：pdf 格式，epub 格式，mobi 格式
Redux 是 JavaScript 状态容器，提供可预测化的状态管理。
可以让你构建一致化的应用，运行于不同的环境（客户端、服务器、原生应用），并且易于测试。不仅于此，它还提供 超爽的开发体验，比如有一个时间旅行调试器可以编辑后实时预览。
Redux 除了和 React 一起用外，还支持其它界面库。
它体小精悍（只有2kB）且没有任何依赖。

评价
“Love what you’re doing with Redux”
Jing Chen，Flux 作者
“I asked for comments on Redux in FB's internal JS discussion group, and it was universally praised. Really awesome work.”
Bill Fisher，Flux 作者
“It's cool that you are inventing a better Flux by not doing Flux at all.”
André Staltz，Cycle 作者

开发经历
Redux 的开发最早开始于我在准备 React Europe 演讲热加载与时间旅行的时候，当初的目标是创建一个状态管理库，来提供最简化 API，但同时做到行为的完全可预测，因此才得以实现日志打印，热加载，时间旅行，同构应用，录制和重放，而不需要任何开发参与。

启示
Redux 由 Flux 演变而来，但受 Elm 的启发，避开了 Flux 的复杂性。
不管你有没有使用过它们，只需几分钟就能上手 Redux。

安装
安装稳定版：
npm install --save redux
多数情况下，你还需要使用 React 绑定库和开发者工具。
npm install --save react-redux
npm install --save-dev redux-devtools

要点
应用中所有的 state 都以一个对象树的形式储存在一个单一的 store 中。
惟一改变 state 的办法是触发 action，一个描述发生什么的对象。
为了描述 action 如何改变 state 树，你需要编写 reducers。
就是这样！
import { createStore } from 'redux';

/**
 * 这是一个 reducer，形式为 (state, action) => state 的纯函数。
 * 描述了 action 如何把 state 转变成下一个 state。
 *
 * state 的形式取决于你，可以是基本类型、数组、对象、
 * 甚至是 Immutable.js 生成的数据结构。惟一的要点是
 * 当 state 变化时需要返回全新的对象，而不是修改传入的参数。
 *
 * 下面例子使用 `switch` 语句和字符串来做判断，但你可以写帮助类(helper)
 * 根据不同的约定（如方法映射）来判断，只要适用你的项目即可。
 */
function counter(state = 0, action) {
  switch (action.type) {
  case 'INCREMENT':
    return state + 1;
  case 'DECREMENT':
    return state - 1;
  default:
    return state;
  }
}

// 创建 Redux store 来存放应用的状态。
// API 是 { subscribe, dispatch, getState }。
let store = createStore(counter);

// 可以手动订阅更新，也可以事件绑定到视图层。
store.subscribe(() =>
  console.log(store.getState())
);

// 改变内部 state 惟一方法是 dispatch 一个 action。
// action 可以被序列化，用日记记录和储存下来，后期还可以以回放的方式执行
store.dispatch({ type: 'INCREMENT' });
// 1
store.dispatch({ type: 'INCREMENT' });
// 2
store.dispatch({ type: 'DECREMENT' });
// 1
你应该把要做的修改变成一个普通对象，这个对象被叫做 action，而不是直接修改 state。然后编写专门的函数来决定每个 action 如何改变应用的 state，这个函数被叫做 reducer。
如果你以前使用 Flux，那么你只需要注意一个重要的区别。Redux 没有 Dispatcher 且不支持多个 store。相反，只有一个单一的 store 和一个根级的 reduce 函数（reducer）。随着应用不断变大，你应该把根级的 reducer 拆成多个小的 reducers，分别独立地操作 state 树的不同部分，而不是添加新的 stores。这就像一个 React 应用只有一个根级的组件，这个根组件又由很多小组件构成。
用这个架构开发计数器有点杀鸡用牛刀，但它的美在于做复杂应用和庞大系统时优秀的扩展能力。由于它可以用 action 追溯应用的每一次修改，因此才有强大的开发工具。如录制用户会话并回放所有 action 来重现它。

文档

示例
如果你是 NPM 新手，创建和运行一个新的项目有难度，或者不知道上面的代码应该放到哪里使用，请下载 simplest-redux-example 这个示例，它是一个集成了 React、Browserify 和 Redux 的最简化的示例项目。

交流
打开 Slack，加入 Reactiflux 中的 #redux 频道。

感谢

贡献者
定期更新，谢谢各位辛勤贡献
本文档翻译流程符合 ETC 翻译规范.

from https://github.com/camsong/redux-in-chinese
Posted by at
Labels: ,