http://codingthesmartway.com/learn-redux-introduction-to-state-management-with-react/
https://github.com/seeschweiler/redux-voting/tree/master/src
//
https://gist.github.com/xgqfrms-GitHub/233bff1e7c701f664f85f877a1346419#gistcomment-2137959
state -> components(event) -> Actions(action) -> Dispacther(action & prevState) -> Reducer(state) -> state
state -> components(event) -> Actions(action)
-> Dispacther(action & prevState) -> Reducer(state) -> state
state -> components(event) -> Actions(action)
=> MiddleWare(req) <--> API(res)
=> Dispacther(action & prevState) -> Reducer(state) -> state
dispatch(action & prevState) & reducers(state)
getState() & subscribe(listener)
http://redux.js.org/docs/basics/Store.html
import {createStore} from 'redux';
import todoApp from './reducers';
// many reducers
let store = createStore(todoApp);
/*
It's easy to create a store if you have a reducer.
In the previous section, we used combineReducers() to combine several reducers into one.
We will now import it, and pass it to createStore().
如果你有一个减速器,那么很容易创建一个商店。
在上一节中,我们使用combineReducers()将几个reducer组合成一个。
我们现在将导入它,并将其传递给createStore()。
*/
let store = createStore(todoApp, window.STATE_FROM_SERVER);
/*
You may optionally specify the initial state as the second argument to createStore().
This is useful for hydrating the state of the client to match the state of a Redux application running on the server.
您可以选择将初始状态指定为createStore()的第二个参数。
这对于保持客户端的状态以匹配在服务器上运行的Redux应用程序的状态非常有用。
*/
import {
addTodo,
toggleTodo,
setVisibilityFilter,
VisibilityFilters
} from './actions';
// Log the initial state
console.log(store.getState());
// Every time the state changes, log it
// Note that subscribe() returns a function for unregistering the listener
let unsubscribe = store.subscribe(() =>
console.log(store.getState());
);
// Dispatch some actions
store.dispatch(addTodo('Learn about actions'));
store.dispatch(addTodo('Learn about reducers'));
store.dispatch(addTodo('Learn about store'));
store.dispatch(toggleTodo(0));
store.dispatch(toggleTodo(1));
store.dispatch(setVisibilityFilter(VisibilityFilters.SHOW_COMPLETED));
// Stop listening to state updates
unsubscribe();
https://mobxjs.github.io/mobx/
Simple, scalable state management & 简单,可扩展的状态管理
https://github.com/mobxjs/mobx
https://github.com/mobxjs/mobx-react
https://mobx.js.org/getting-started.html
https://github.com/dive2Pro/SoundCloudMobx
https://github.com/ng-book2/book
https://github.com/ng-book2/code
https://www.gitbook.com/login?next=%2F%40xgqfrms-github%2Fdashboard
http://pepa.holla.cz/wp-content/uploads/2015/10/ng-book-The-Complete-Book-on-AngularJS.pdf
https://github.com/papapin/Ng-book-2-
http://redux.js.org/docs/basics/Actions.html
/*
* action types
*/
export const ADD_TODO = 'ADD_TODO';
export const TOGGLE_TODO = 'TOGGLE_TODO';
export const SET_VISIBILITY_FILTER = 'SET_VISIBILITY_FILTER';
/*
* other constants
*/
export const VisibilityFilters = {
SHOW_ALL: 'SHOW_ALL',
SHOW_COMPLETED: 'SHOW_COMPLETED',
SHOW_ACTIVE: 'SHOW_ACTIVE'
};
/*
* action creators
*/
export function addTodo(text) {
return {
type: ADD_TODO,
text
};
}
export function toggleTodo(index) {
return {
type: TOGGLE_TODO,
index
};
}
export function setVisibilityFilter(filter) {
return {
type: SET_VISIBILITY_FILTER,
filter
};
}
https://github.com/kenberkeley/redux-simple-tutorial
https://github.com/kenberkeley/react-demo
├─ build/ # Webpack 配置目录
├─ dist/ # build 生成的生产环境下的项目
├─ src/ # 源码目录(开发都在这里进行)
│ ├─ assets/ # 放置需要经由 Webpack 处理的静态文件
│ ├─ components/ # 组件(COMPONENT)
│ ├─ redux/ # Redux 一箩筐
│ │ ├─ actions/ # (ACTION)
│ │ ├─ reducers/ # (REDUCER)
│ │ ├─ store/ # (STORE)
│ ├── routes/ # 路由(ROUTE)
│ ├── services/ # 服务(SERVICE,用于统一管理 XHR 请求,这是从 Vue Demo 中直接复制过来的)
│ ├── utils/ # 工具库(UTIL)
│ │ ├─ HoC/ # 高阶组件(HOC,全称 Higher Order Component)
│ │ ├─ mixins/ # 混合(MIXIN)
│ ├── views/ # 路由视图基页(VIEW)
│ │ ├─ layout/ # 全局布局
│ ├── app.js # 启动文件
│ ├── index.html # 静态基页
├── static/ # 放置无需经由 Webpack 处理的静态文件
├── .babelrc # Babel 转码配置
├── .eslintignore # (配置)ESLint 检查中需忽略的文件(夹)
├── .eslintrc # ESLint 配置
├── .gitignore # (配置)需被 Git 忽略的文件(夹)
├── package.json # (这个就不用多解释了吧)
react-redux
https://www.slideshare.net/nikgraf/react-redux-introduction
http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_one_basic_usages.html
http://redux.js.org/docs/basics/
https://tryolabs.com/blog/2016/04/19/understanding-the-redux-paradigm/
http://www.bebetterdeveloper.com/coding/getting-started-react-redux.html
https://k94n.com/gordux-js-the-redux-pattern-in-vanilla-js
https://router5.github.io/docs/with-react-redux.html#/inbox
reduxjs/redux#653