redux精读

Redux
三大原则：
（1）单一数据元。
（2）State 是只读的。
(3)使用纯函数来执行修改

Store
Store是一个容器，用来保存数据。整个应用只能有一个Store。
Redux提供createStore这个函数来生成Store。

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

上面的代码中，createStore函数接受另外一个函数作为参数，返回新生成的Store对象。

State
Store对象包含所有数据，如果想得到某个时点的数据

Action
用户触发view，view发出action， Action 就是 View 发出的通知，表示 State 应该要发生变化了。

Action Creator
定义一个函数来生成 Action，这个函数就叫 Action Creator。

store.dispatch()
store.dispatch()是 View 发出 Action 的唯一方法。store.dispatch接受一个 Action 对象作为参数，将它发送出去。

Reducer
Store 收到 Action 以后，必须给出一个新的 State，这样 View 才会发生变化。这种 State 的计算过程就叫做 Reducer。
Reducer 是一个函数，它接受 Action 和当前 State 作为参数，返回一个新的 State。
store.dispatch方法会触发 Reducer 的自动执行。为此，Store 需要知道 Reducer 函数，做法就是在生成 Store 的时候，将 Reducer 传入createStore方法。

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

combineReducer函数

import { combineReducers } from 'redux';
const chatReducer = combineReducers({
  chatLog,
  statusMessage,
  userName
})
export default todoApp;

Reducer 函数被拆成了三个小函数，每一个负责生成对应的属性。combineReducers方法将三个子 Reducer 合并成一个大的函数，以便于逻辑代码维护。

UI组件和容器组件

import { connect } from 'react-redux'
const VisibleTodoList = connect(
  mapStateToProps,
  mapDispatchToProps
)(TodoList)

TodoList是 UI 组件，VisibleTodoList就是由 React-Redux 通过connect方法自动生成的容器组件。
mapStateToProps和mapDispatchToProps。它们定义了 UI 组件的业务逻辑。前者负责输入逻辑，即将state映射到 UI 组件的参数（props），后者负责输出逻辑，即将用户对 UI 组件的操作映射成 Action。
mapStateToProps会订阅 Store，每当state更新的时候，就会自动执行，重新计算 UI 组件的参数，从而触发 UI 组件的重新渲染

const mapStateToProps = (state, ownProps) => {
  return {
    active: ownProps.filter === state.visibilityFilter
  }
}

const mapDispatchToProps = (
  dispatch,
  ownProps
) => {
  return {
    onClick: () => {
      dispatch({
        type: 'SET_VISIBILITY_FILTER',
        filter: ownProps.filter
      });
    }
  };
}

Provider 组件
Provider组件，可以让容器组件拿到state，它的原理是React组件的context属性

import { Provider } from 'react-redux'
import { createStore } from 'redux'
import todoApp from './reducers'
import App from './components/App'
let store = createStore(todoApp);
render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)