redux react-redux

redux:state更新

redux
三大概念
- Action：描述事件
- Reducer：响应事件 (previousState, action) => newState
- Store： 分发事件 存储state
三大原则：
- state 以单一对象存储在 store 对象中。
- state是只读的：这里和Flux思想一致。唯一改变 state 的方法是触发事先定义好的 action。
- 使用纯函数 reducer 执行 state 更新。

• 子组件发生改变触发事件想改变其它组件或者父组件状态，只能通过action传递到统一state中。不需要影响其它组件的事件内部消化即可
• action creators使用 store 的store.dispatch() 方法来把action传给store。store作为中间层进行请求处理，获得请求数据后根据action.type后查找对应 Reducers进行数据处理，输出新的state。（store包含dispatch() 方法和reducers）。
• 每个reducer输出一个state状态，export default rootReducer = combineReducers(A,B,C,D);使得各个reducer合并为一个全局state；
• 前端复杂性在于 view，view 复杂性在于 state 处理。state 复杂是因为包括了 AJAX 返回的数据、当前显示的是哪个 tab 等这些 UI state、表单状态、甚至还有当前的 url 等。Redux 把这些所有的 state 汇总成一个大的对象，起了个名字叫 Store.
• Redux 限定一个应用只能有一个 Store。单一 Store 带来的好处是，所有数据结果集中化，操作时的便利，只要把它传给最外层组件，那么内层组件就不需要维持 state，全部经父级由 props 往下传即可。子组件变得异常简单。
• action 对象各种各样，每种对应某个 case ，但最后都汇总到 state 对象中，从多到一，这是一个减少(reduce)的过程

Redux起源于React，但它们并没有关系。它是独立的，支持React、Angular、Ember或者更多其他的框架

react-redux:组件更新

两个方法：
-Provider:Connect 组件需要 store。这个需求由 Redux 提供的另一个组件 Provider 来提供。源码中，Provider 继承了 React.Component，所以可以以 React 组件的形式来为 Provider 注入 store，从而使得其子组件能够在上下文中得到 store 对象。
-connect:为 React 组件提供 store 中的部分 state 数据 及 dispatch 方法，这样 React 组件就可以通过 dispatch 来更新全局 state。

主要思路：

• Redux提供唯一store。
• 用Provider组件包含住最顶层的组件，将store作为props传入。
• 用connect方法mapStateToProps获取store树结构中的全局state，return state的部分属性作为子组件的props
• 子组件调用action，dispath到reducer返回新的state，同步到store的树结构中，通知组件进行更新

代码demo：

// Redux提供store connect组件
let App = connect(
  mapStateToProps,
  mapDispatchToProps
)(AAA)

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

---

jsx中组件AAA 有mapDispatchToProps mapStateToProps

事件处理：
jsx:

<div onCLick={this.props.addNum}>{this.props.value}></div>

mapDispatchToProps: 把addNum事件dispatch分发到action事件中

function mapDispatchToProps(dispatch) {
return {
addNum: () => dispatch(increaseAction)
}
}

action中定义事件type

const increaseAction = { type: ‘increase’ }

store创建reducer

let store = createStore(counter)

reducer 处理action 修改state

function counter(state = { count: 0 }, action) {
let count = state.count
switch (action.type) {
case ‘increase’:
return { count: count + 1 }
default:
return state
}
}

state更新后修改props

function mapStateToProps(state) {
return {
value: state.count
}
}

simplest-demo
simple-start
其他相关连接1
其他相关连接2