使用redux需要注意的点

228 阅读2分钟
  1. react和redux没有直接联系,当react需要结合redux使用的时候,需要引入 react-redux ,该插件提供了connet等方法使得react可以注入redux属性。

  2. redux修改 state的值的时候不能直接修改,需要重新声明变量,然后修改这个变量,返回这个变量覆盖原先的state值

如果redux没有返回新的数据

redux是怎么派发数据的

1.png 首先我们要确定我们要做什么,然后使用让Action Creators创建action,通过dispatch将action分发出去。然后store会根据我们的action找到指定的reducer,reducer根据type对数据进行处理,返回一个新的数据到store里面。然后可以根据getState()方法从store中拿到修改后的数据。 redux可以更改状态,但是默认不会引起页面的改变,可以监测一下状态改变,如果改变了,则调用一下render。

connect原理

connect连接我们的容器组件和redux的store。connect包装在我们的react容器组件的外一层,它接收上面 Provider 提供的 store 里面的 state 和 dispatch,传给一个构造函数,返回一个对象,以属性形式传给我们的容器组件。

    • 容器组件左手redux,右手ui组件

react-redux.jpg

//connect方法声明 
connect([mapStateToProps], [mapDispatchToProps], [mergeProps],[options])

export default connect(mapStateProps,mapDispatchToProps)(UI组件)

原理:connect之所以会成功,是因为Provider组件(相当于使用了provider,context)

  1. 在原组件上包裹层,使原来整个应成为Provider的组件
  2. 接收Redux的store作为props,通过context对象传递给孙组件上的connect

connect连接 Redux 和 React UI组件,Provider包在我们的容器组件的外层,容器组件接收上一级 Provider 提供的 store 中的 state 和 dispatch,传给一个内部构造函数,返回一个对象,以属性形式传给我们的容器组件。