redux state management react

redux-state-management-react.md

learn-redux-introduction-to-state-management-with-react

http://codingthesmartway.com/learn-redux-introduction-to-state-management-with-react/

https://github.com/seeschweiler/redux-voting/tree/master/src

    
//

https://github.com/seeschweiler

https://vote.codingthesmartway.com/

https://youtu.be/SGOFxK-28ns

udemy

https://www.udemy.com/

https://www.udemy.com/courses/search/?q=react&src=sac&kw=react

https://www.udemy.com/courses/search/?q=react&src=sac&kw=react&price=price-free

https://www.udemy.com/essentials-in-javascript-es6/

https://www.udemy.com/nodejs-codeless-api-creation-up-and-running-with-swagger/

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

reduxjs/redux#653 (comment)

Redux Dataflow

https://gist.github.com/xgqfrms-GitHub/233bff1e7c701f664f85f877a1346419#gistcomment-2137959

basic

state -> components(event) -> Actions(action) -> Dispacther(action & prevState) -> Reducer(state) -> state

Side Effects

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

http://redux.js.org/docs/basics/DataFlow.html

Store

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();

Mobx

https://mobxjs.github.io/mobx/

Simple, scalable state management & 简单，可扩展的状态管理

https://github.com/mobxjs/mobx

https://github.com/mobxjs/mobx-react

http://cn.mobx.js.org/

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.ng-book.com/2/

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-

https://github.com/RxJS-CN/RxJS-Docs-CN

http://reactivex.io/rxjs/

Actions

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
    };
}

---

http://redux.js.org/docs/basics/DataFlow.html

http://redux.js.org/docs/basics/UsageWithReact.html

redux & react

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     # （这个就不用多解释了吧）

https://gist.github.com/xgqfrms-gildata/733097991de729ab842d080f7724a571#file-redux-state-management-react-md