关于redux 理解

redux 的作用

• 解决全局数据管理，组件之间的通信问题
• 统一管理复杂应用中越来越多的状态
• 实现state的改变可预测

核心观念

• 用action作为唯一可以改变store的诱因
• reducer去改变，管理，修改 store，将数据和具体的组件解耦，通过reducer将state和action关联起来。

三原则

• app全局只有一个store ，存储整个应用的state.
• state是只读的
  • 改变store的唯一方法是触发一个action,这个action用来描述发生了什么，这将通知相应的reducer去对store进行相应的操作。
• 改变store的是纯函数，即reducer函数。
• 纯函数，指没有副作用，不会直接修改state，而是返回一个新的state对象。以 prestate + action = newstate 的形式。

实例

• 以redux 的 - example counter为例

1. 程序入口src/index.js 文件

import React from 'react'
import ReactDOM from 'react-dom'
import { createStore } from 'redux'
import Counter from './components/Counter'

// a reducer tie state and actions together
import counter from './reducers'

const store = createStore(counter)  //@1
const rootEl = document.getElementById('root')

const render = () => ReactDOM.render(
  <Counter
    value={store.getState()}
    onIncrement={() => store.dispatch({ type: 'INCREMENT' })}
    onDecrement={() => store.dispatch({ type: 'DECREMENT' })}
  />,
  rootEl
)

render()
store.subscribe(render)  //@2

• @1 createStore(counter) 接受一个reducer 作为参数，返回一个store对象，这个store对象可以用于获取state，dispatch action ,订阅change事件

• @2 store 设置 store里面的state数据改变时，render 最为回调处理函数。即数据改变时，重新渲染页面。

  2.Counter 组件

import React, { Component, PropTypes } from 'react'

class Counter extends Component {
  static propTypes = {
    value: PropTypes.number.isRequired,
    onIncrement: PropTypes.func.isRequired,
    onDecrement: PropTypes.func.isRequired
  }

  incrementIfOdd = () => {
    if (this.props.value % 2 !== 0) {
      this.props.onIncrement()
    }
  }

  incrementAsync = () => {
    setTimeout(this.props.onIncrement, 1000)
  }

  render() {
    const { value, onIncrement, onDecrement } = this.props
    return (
      <p>
        Clicked: {value} times
        {' '}
        <button onClick={onIncrement}>
          +
        </button>
        {' '}
        <button onClick={onDecrement}>
          -
        </button>
        {' '}
        <button onClick={this.incrementIfOdd}>
          Increment if odd
        </button>
        {' '}
        <button onClick={this.incrementAsync}>
          Increment async
        </button>
      </p>
    )
  }
}

export default Counter

3.redducer counter/index.js文件

/**
 * reducer 将action和state联系在一起
 *
 * @param state
 * @param action
 * @returns {number}  返回新的state
 */
export default (state = 0, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1
    case 'DECREMENT':
      return state - 1
    default:
      return state
  }
}

• 1.Counter中的button点击事件将调用store.dispatch(actionObject) 派发一个action
• 2.reducer 接收到action ,根据type对当前state进行一些操作，返回一个新的state,此处并不会直接修改当前的state.
• 3.state 改变，将触发render函数，重新渲染页面

与flux的比较

• flux 把模型更新逻辑放在store中，而redux放在reducer中。
• 为了避免直接改变数据，他们都将改变描述为一个普通对象（action）.
• flux 可以有多个store，而redux全局只有一个store管理所有数据。相比之下，redux相当于将flux在store中对state的更新部分抽离出来放在多个reducer中去单独处理。
• redux 通过combineReducers() 方法，将多个reducer合并为一个，然后用createReducer()方法将reducers和全局唯一的store联系起来。

参考

• redux doc