阮一峰的redux教学

mobx后面再去了解。

http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_one_basic_usages.html

React 只是 DOM 的一个抽象层，并不是 Web 应用的完整解决方案 ,所以要配合React-redux (redux的一个react版本) 和redux相似的技术库：早期的 flux, Immutable, Rxjs，vue版的 vuex等。

你的应用有以下场景，可以考虑使用 Redux。

某个组件的状态，需要共享

某个状态需要在任何地方都可以拿到

一个组件需要改变全局状态

一个组件需要改变另一个组件的状态

发生上面情况时，如果不使用 Redux 或者其他状态管理工具，不按照一定规律处理状态的读写，代码很快就会变成一团乱麻。你需要一种机制，可以在同一个地方查询状态、改变状态、传播状态的变化。

总之，不要把 Redux 当作万灵丹，如果你的应用没那么复杂，就没必要用它。另一方面，Redux 只是 Web 架构的一种解决方案，也可以选择其他方案。

Redux 的设计思想很简单，就两句话。

（1）Web 应用是一个状态机，视图与状态是一一对应的。

（2）所有的状态，保存在一个对象里面。

基本概念

store
state
Action

Store 就是保存数据的地方，你可以把它看成一个容器。整个应用只能有一个 Store。单一数据源

import { createStore } from 'redux';
const store = createStore(fn);

State对象包含所有数据。如果想得到某个时点的数据，就要对 Store 生成快照。这种时点的数据集合，就叫做 State。
唯一改变 state 的方法就是触发 action，action 是一个用于描述已发生事件的普通对象。state是只读的
一个 State 对应一个 View。只要 State 相同，View 就相同。你知道 State，就知道 View 是什么样，反之亦然。

import { createStore } from 'redux';
const store = createStore(fn);

const state = store.getState();

Action: State 的变化，会导致 View 的变化。但是，用户接触不到 State，只能接触到 View。所以，State 的变化必须是 View 导致的。Action 就是 View 发出的通知，表示 State 应该要发生变化了。
Action 是一个对象。其中的type属性是必须的，表示 Action 的名称。其他属性可以自由设置

const action = {
  type: 'ADD_TODO',   //action名
  payload: 'Learn Redux'   
};

View 要发送多少种消息，就会有多少种 Action。如果都手写，会很麻烦。可以定义一个函数来生成 Action，这个函数就叫 Action Creator。

const ADD_TODO = '添加 TODO';

function addTodo(text) {
  return {
    type: ADD_TODO,
    text
  }
}

const action = addTodo('Learn Redux');  //addTodo就是个action creator

store.dispatch()是 View 发出 Action 的唯一方法。

import { createStore } from 'redux';
const store = createStore(fn);

store.dispatch({
  type: 'ADD_TODO',
  payload: 'Learn Redux'
});

store.dispatch(addTodo('Learn Redux'))  //addTodo为action creator




//vue提交mutation改变state
this.$store.commit(mutation名,payload)
this.$store.dispatch(action名,payload)

Store 收到 Action 以后，必须给出一个新的 State，这样 View 才会发生变化。这种 State 的计算过程就叫做 Reducer。
Reducer 是一个函数，它接受 Action 和当前 State 作为参数，返回一个新的 State。 reducer是个纯函数
纯函数保证：同样的输入得到同样的输出。像 Date.now(),Math.random() 就不是纯函数。

const reducer = function (state, action) {
  // ...
  return new_state;
};




//下面是一个实际的例子。

const defaultState = 0;
const reducer = (state = defaultState, action) => {
  switch (action.type) {
    case 'ADD':
      return state + action.payload;
    default: 
      return state;
  }
};

const state = reducer(1, {
  type: 'ADD',
  payload: 2
});

实际应用中，Reducer 函数不用像上面这样手动调用，store.dispatch方法会触发 Reducer 的自动执行。为此，Store 需要知道 Reducer 函数，做法就是在生成 Store 的时候，将 Reducer 传入createStore方法。

import { createStore } from 'redux';
const store = createStore(reducer);

Store 允许使用store.subscribe方法设置监听函数，一旦 State 发生变化，就自动执行这个函数。

import { createStore } from 'redux';
const store = createStore(reducer);

store.subscribe(listener);

Reducer 函数负责生成 State。由于整个应用只有一个 State 对象，包含所有数据，对于大型应用来说，这个 State 必然十分庞大，导致 Reducer 函数也十分庞大。相应地就想办法拆分reducer 。

Redux的工作流程：

来源：oschina

链接：https://my.oschina.net/u/560237/blog/3192671

标签

redux

阮一峰

payload

const