react-redux详细介绍

react-redux详细介绍

1、相关概念

所有的ui组件应该包裹一个容器组件，他们是父子关系；

容器组件是正真和redux打交道的，里面可以随意使用redux的api;

ui组件不可以使用任何redux的api；

容器组件会传给ui组件：（1）redux中保存的状态；（2）用于操作状态的方法；

备注：容器给Ui组件传递：状态、操作状态的方法，均需要通过props传递；

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-heeQUXSI-1643114799134)(C:\Users\hp\AppData\Roaming\Typora\typora-user-images\1643015931201.png)]

//引入Count 的ui组件
import CountUI from '../../components/Count'

//引入connect用于连接UI组件与redux
import {connect} from 'react-redux';
import {createIncrementAction} from 'action';

/*
 1、mapStateToProps函数返回的是一个对象；
 2、对象中的key就作为传递给Ui组件props的key,value就作为传递给Ui组件props的value
 3、mapStateToProps用于传递状态
*/
function mapStateToProps(state) {
 return {
 count:state
 }
}

/*
 1、mapDispatchToProps函数返回的是一个对象；
 2、对象中的key就作为传递给Ui组件props的key,value就作为传递给Ui组件props的value
 3、mapDispatchToProps用于传递操作状态的方法
*/
function mapDispatchToProps(dispatch) {
 return {
  jia:(data) => {
   //通知redux执行加法
   dispatch(createIncrementAction(number))
  }
 }
}

//使用connect()()创建并暴露一个Count的容器组件
export default  connect(mapStateToProps, mapDispatchToProps)(CountUI);

App.js

import Count from './containers/Count';//引入Count的容器组件
import store from './redux/store';

export default class App extends Component {
 render() {
   return (
    <div>
     < Count/>
    </div>
   )
 }
}

2、基本使用（优化）

//引入Count 的ui组件
import CountUI from '../../components/Count'

//引入connect用于连接UI组件与redux
import {connect} from 'react-redux';
import {createIncrementAction} from 'action';

//使用connect()()创建并暴露一个Count的容器组件
export default  connect(
state = > ({count:state}),
 //mapDispatchToProps的简写，将其写成对象，会自动进行分发
 {
  jia:createIncrementAction
  }
 )(CountUI);

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import store from './redux/store';
import { Provider} from 'react-redux';

ReactDOM.render(
//此处需要用Provider包裹App，目的是让App所有的后代容器组件都可以接收到store
 <Provider store = {store}>
  <App />
 </Provider>,
 document.getElementById('root')
)

3、求和案例react-rudex优化

1、容器组件和Ui组件整合一个文件；
2、无需自己给容器组件传递store,给<App />包裹一个<Provider store = {store} />即可；
3、使用了react-redux后也不用再给自己检测redux状态的改变了，容器组件可以自动完成这个工作；
4、mapDispatchToProps可以简单的写成一个对象
5、一个组件要和redux打交道，要经过哪几步？
（1）定义好ui组件--不暴露；
（2）引入connect生成一个容器组件，并暴露，写法如下：
connect(
 state=({type:value}),
 {key:xxxAction}
)(UI组件)
（3）在ui组件中通过this.props.xxx读取和操作状态