redux(二) 数据流向

约定不等于承诺〃 2022-06-12 03:12 305阅读 0赞

上节我们做了一个简单的例子  
![这里写图片描述][SouthEast]

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

![这里写图片描述][SouthEast 1]

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

![这里写图片描述][SouthEast 2]

我们来分析下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.【快递点返回的对象】.【相应的属性】  
所以数据流向图大概如下：  
![这里写图片描述][SouthEast 3]

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

[SouthEast]: /images/20220612/356108d446ce43d1a87db184e939f0b1.png
[SouthEast 1]: /images/20220612/2c7be8b4ed6a4fea95fe9a837665d39c.png
[SouthEast 2]: /images/20220612/fa43266044f94ffe8865106930e26682.png
[SouthEast 3]: /images/20220612/12bf945d9c234b45bdaf77f41dea007e.png