Redux的基础概念

三个基本原则

1. 整个应用只有唯一一个可信数据源，也就是只有一个store
2. state只能通过出发action来更改
3. state的更改必须写成纯函数，也就是每次更改总是返回一个新的state，这种函数被称为reducer

actions

一般，使用action creators来生成action，最后返回action对象

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

触发一个动作只用调用 dispatch(addTodo(text))

reducers

reducer 用来处理action触发的对状态数的更改
所以一个reducer函数会接受oldState和action 两个参数，返回一个新的state

const initialState = {
  a: 'a',
  b: 'b'
};

function someApp(state = initialState, action) {
  switch (action.type) {
    case 'CHANGE_A':
      return { ...state, a: 'Modified a' };
    case 'CHANGE_B':
      return { ...state, b: action.payload };
    default:
      return state
  }
}

Reducer 也是 pure function，这点非常重要，所以绝对不要在 reducer 里面做一些引入 side-effects 的事情，比如：

直接修改 state 参数对象
请求 API
调用不纯的函数，比如 Data.now() Math.random()

store

store的作用就是连接action和reducer

Hold 住整个应用的 State 状态树
提供一个 getState() 方法获取 State
提供一个 dispatch() 方法发送 action 更改 State
提供一个 subscribe() 方法注册回调函数监听 State 的更改

provider

Provider 作为一个容器组件，用来接受 Store，并且让 Store 对子组件可用

render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

connect

connect() 这个方法略微复杂一点，主要是因为它的用法非常灵活：connect([mapStateToProps], mapDispatchToProps], [mergeProps], [options])，它最多接受4个参数，都是可选的，并且这个方法调用会返回另一个函数，这个返回的函数来接受一个组件类作为参数，最后才返回一个和 Redux store 关联起来的新组件，类似这样：

class App extends Component { ... }
export default connect()(App);

这样就可以在 App 这个组件里面通过 props 拿到 Store 的 dispatch 方法，但是注意现在的 App 没有监听 Store 的状态更改，如果要监听 Store 的状态更改，必须要指定 mapStateToProps 参数。