7.Redux学习体会

Redux中文文档：

http://www.redux.org.cn/

Redux 入门教程（一）：基本用法：

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

Redux 入门教程（二）：中间件与异步操作：

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

Redux 入门教程（三）：React-Redux 的用法：

http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_three_react-redux.html

redux工作流程

redux的工作流程可以大致总结为如下过程：
state-->actionCreator-->reducer-->combineReducers-->createStore-->bindActionCreators-->connect(mapStateToProps, mapDispatchToProps)(SomeComponent)

1. 设计全局 state 的数据结构 ；

const ACTION_NAME= 'ACTION_NAME'

{
  type: ACTION_NAME,
  text: 'Your data'
}

2. 设计更改 state 数据的 actionTypes 常量，以及其他跟视图展现相关的 actionTypes 常量；

上步骤中ACTION_NAME即是actionTypes常量

const ACTION_NAME= 'ACTION_NAME'

3. 根据 actionTypes 常量，编写 actionCreator函数；

function doSomeAction(text) {
  return {
    type: ACTION_NAME,
    text
  }
}

4. 根据各个 actionCreator 的返回值，设计 reducer 函数处理action传入的数据；

function doSomeThing(state = initialState, action) {
  switch (action.type) {
    case ACTION_NAME:
      return Object.assign({}, state, {
        text: action.text
      })
    default:
      return state
  }
}

5. 在编写完了所有 reducer 函数之后，createStore(reducer, initState) 得到全局 store 对象，并通过Provider传递给根组件；

import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import { createStore } from 'redux'
import doSomeThing from './reducers'
import App from './components/App'  //一般为根组件（本文件）之后的主页面

let store = createStore(doSomeThing)

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

6. 在需要使用redux的容器组件中，用 bindActionCreators 函数将 actionCreators 和 store.dispatch 绑定起来，得到一组能修改全局状态的函数 ；

bindActionCreators(actions, dispatch)

7. 在需要使用redux的容器组件中，分发各个状态和状态修改函数到各个 页面属性和DOM 事件中:

function mapStateToProps (state) {
  let {a, b, c} = state
  return {a,b,c}
}

function mapDispatchToProps (dispatch) {
  return bindActionCreators(actions, dispatch)
}

export default connect(mapStateToProps, mapDispatchToProps)(SomeComponent)