redux(二) 数据流向

上节我们做了一个简单的例子

点击按钮,hello会变成其他字符

点击字体，字也会发生相应改变

我们来分析下redux的数据流向，便于我们对它的理解， 点击按钮执行的语句是：

   <button onClick={()=>dispatch(ClickButton())}>click me</button>

store.dispatch(action): 将一个 action 对象发送给 reducer。我们看下
ClickButton()该action的内容：

export function ClickButton() {
  return {
    type: CLICK_BUTTON,
    text:"点击了ClickButton"
  };
}

其实我们可以理解为点击按钮时，我们将{type:CLICK_BUTTON,text:’点击了ClickButton’}该json对象传递给了reducer。
可以比喻成，点击按钮时，我们拿了一个action【包裹】给reducer，reducer可以理解为快递点，快递站就会根据包裹的类型以及地址，选择相应的包装盒来包装处理我们拿过来的包裹。

function clickRedux(state = initialState, action) {
//快递站就根据 包裹的类型 选择不同的处理逻辑
  switch (action.type) {
    case CHANGE_TEXT:
    //基于包裹传递过来的信息，重新封装一个对象返给store，其实返回的对象可以跟action有关系，也可以跟action没有关系，但实际项目一定是跟action相关联的。其实我们这里state都没用上，原则上一般都会跟state结合使用，下次我们找个复杂的例子就懂咯
      return {
        text: action.text
      }
    case CLICK_BUTTON:
      return {
        text: action.text
      }
    default:
      return state
  }
}

reducer返回一个对象，其实reducer【ClickBox快递点】将加工处理后的包裹呢送到store【仓储中心】里面

//可以比喻成一个快递中心 由多个快递点构成
const rootReducer = combineReducers({
  ClickBox
});

store【仓储中心】会将包裹呢送到界面view里面去，view会调用mapStateToProps方法，也就好比拆开包裹，根据包裹里面的内容对view的状态进行更新，并将更新结果反映给浏览器。

function mapStateToProps(state) {
  console.log(state.ClickBox.text)
  return { text:state.ClickBox.text}
}

这时候界面就会根据mapStateToProps返回的对象重新渲染相应的组件。

return { text:state.ClickBox.text}

state.ClickBox.text注意这里其实是 state.【快递点返回的对象】.【相应的属性】
所以数据流向图大概如下：

这是我个人理解，因为毕竟才学习redux，也不知道理解是否正确，如果不正确的请大家多多指点。