redux--react-redux 相关概念解析

Redux   react  

1 Redux是一个单独的状态管理库。要实现react和redux的关联管理。我们需要利用react-redux。它提供了两个核心方法：Provider和connect。前者负责给react项目根组件包裹一层外衣。然后把store作为参数给传递进来。这样它就是所有组件的根组件，从而可以把数据层层传递给子组件。Connect则负责连接单个组件和store的交流。某个组件如果想要获得store里数据。那么需要通过connect这个桥梁。

2 redux到底提供了哪些方法，又为我们解决了哪些问题？

  A store这个中央数据库是怎么来的？

   Redux提供了createStore这个方法。用来生成store。

  B 如果存在多个reducer函数，如何让他们都存储在store中？

   Redux提供了combineReducers这个方法。可以把所有的reducer都合并在一起。统一在store中，作为数据源

  C 在处理异步请求时，我们可能需要发送多个action，那多个action发送以后的值呢？

这时候我们就用到了中间件。Redux提供了applMiddleyware中间件。它返回多个action执行后最后的值

 3 Connect方法是连接react组件和redux数据中心的桥梁。Connect函数接收4个参数。分别是connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])

我们在单独组件中，不需要整个store的数据，可能只需要某一部分的数据，这时候mapStateToProps帮我们把store进行了分解。只把需要的那部分数据进行映射。然后我们通过在组件中通过一个函数以一个对象的方式返回出来。供组件接收使用。mapDispatchToProps同理。通过这种方式我们只需要在组件中通过this.props.xxx就可以直接拿到。

 

Eg：

componentDidMount（）{

axios.post("/asset/listCategory",qs.stringify(data)).then(res=>{

             let assetData=res.data.data;

             that.props.fetchAsset(assetData)

         }).catch(err=>{

 

              console.log(err)

         })

 

}

function mapStateToProps(state){

    return{

      state

 }

}

 

function mapDispatchToProps(dispatch){

  return{

     fetchData:(data)=>dispatch(getData(data)),

     fetchAsset:(data)=>dispatch(getAssetData(data)),

  }

}

 

export default connect(mapStateToProps,mapDispatchToProps)(Login)

 

 

附加：

---redux-thunk中间件。

由于action只能是一个对象，对于异步的action无能为力。为了解决这个问题。Redux-thunk应运而生。它在dispatch派发的时候，中途进行拦截判断。如果该action是一个对象。则直接走同步流程。否则则返回一个函数，继续执行。

比如 action 中有 setTimeout 或者通过  fetch 通用远程 API 这些场景，那么就应该使用 redux-thunk 了。redux-thunk 帮助你统一了异步和同步 action 的调用方式，把异步过程放在 action 级别解决，对 component 没有影响