react-redux——使用redux——使用react-redux这个扩展

Posted 2022-09-28 勇敢*牛牛

安装Redux

redux不是内嵌在react框架中，使用时需要手动去安装

yarn add redux

核心概念

💚单一数据源(state)
整个redux中的数据都是集中管理，存储于同一个数据源中，数据源中的数据为单向数据流，不可直接修改
💜纯函数(reducer)统一对state数据修改
集中状态的管理
定义

// 常规导入
import  createStore  from "redux";
import  composeWithDevTools  from '@redux-devtools/extension'
// 状态
const initState = 
    num:100

const reducer = (state=initState,action)=>
    // console.log(action);
    if(action.type === "add")
        return ...state,num:state.num+action.payload
    
    return state


let store
process.env.NODE_ENV === "development"?store = createStore(reducer,composeWithDevTools()):store = createStore(reducer)
//store = createStore(reducer)

export default store

组件中获取/设置数据

import React,  Component  from "react"
// 导入仓库
import store from './store'

class App extends Component 
    constructor(props)
        super(props)
        // 获取初始数据
        this.state = store.getState()

componentDidMount()
        // 订阅数据（获取更新）
        store.subscribe(() => this.setState(state => store.getState()))

    render() 
        return (
            <div>
                 /* 渲染的内容 */ 
            </div>
        );
    

    incr() 
        // 任务清单
        const actionCreator = 
            type: 'incr',
            payload: 1
        
        // 派发任务清单
        store.dispatch(actionCreator);
    

export default App;

具体的概念就往之前面的博客看。

安装浏览器插件：
项目下载安装：

yarn add @redux-devtools/extension
导入
import  composeWithDevTools  from '@redux-devtools/extension'
使用
const store = createStore(reducer,composeWithDevTools())

安装之后重启浏览器就能看见这个工具的选项。

判断其生产模式 ：
关闭redux工具。

process.env.NODE_ENV === "development"?store = createStore(reducer,composeWithDevTools()):store = createStore(reducer)

---

react-redux

React-Redux是Redux的官方针对React开发的扩展库，默认没有在React项目中安装，需要手动来安装。react-redux是依赖于redux，所以你必须安装redux
你可以理解为react-redux就是redux给我们提供一些高阶组件，能解决的问题是：使用它以后我们不需要在每个组件中再去手动订阅数据的更新了。

react——redux如何调用redux数据。

yarn add react-redux

• react-redux它是redux专门为react框架所开发的扩展，所以用它必须先安装好redux
• react-redux它是方便react组件中调用redux中的数据
  定义Provider
  在全局父组件中定义好数据来源，与后面的connect数据获取匹配。

导出Provider生产数据者组件
import  Provider  from 'react-redux'
// 数据源
import store from './store'

*****
<Provider store=store>
    <Router>
      <App />
    </Router>
  </Provider>,

在程序主文件index.js文件中,定义Provider

子组件中的用法：

• 提供一个高阶组件connect用来把redux中的state或action映射到当前组件的props中
• import connect from 'react-redux'

@connect(state => state, mapDispatchToProps)
class App extends Component 

有两个参数：

• 参数1：函数，把redux中的state数据映射到当前的props属性中
• 参数2：函数|对象 ， 把你操作的dispatch方法映射到当前的props属性中
• connect(mapStateToProps, mapDispatchToProps)
• 这两个函数都必须返回一个json对象。

import  connect  from 'react-redux'
// 此函数必须要返回一个json对象
// 函数的state参数就是redux中的state数据
const mapStateToProps = state => 
  return  num: state.num 


// const mapStateToProps = state => state

// 此函数必须要返回一个json对象
// dispatch它就是之前通过store.dispatch的方法
const mapDispatchToProps = dispatch => 
  return 
    add(n = 1) 
      dispatch( type: 'add', payload: n )
    
  

通过这个高阶组件的扩展就完成了，简化对store数据的操作修改：

const mapStateToProps = state => 
  return  num: state.num 

const mapDispatchToProps = dispatch => 
  return 
    add(n = 1) 
      dispatch( type: 'add', payload: n )
    ,
    app(n=1)
        dispatch( type: 'app', payload: n )
    
  

@connect(mapStateToProps, mapDispatchToProps)
class App extends Component

store中的store
“”“”“”“<h1>App组件this.props.num</h1>组件使用state里的num
“”“”“””this.props.add(1)使用reducer 执行的方法。

说白了：那其实这个扩展的存在意义就是将store数据源和操作源提取到this.props中去。

那么mapDispatchToProps还有一种对象写法

const mapDispatchToProps = 
      add:(n = 1)=> ( type: 'add', payload: n )

• 如果使用了对象方式，你就只能使用同步不能使用异步。说白了就对象的方式控制不了dispatch的 传输时间。
• 在connect实现时如果是对象，则它会主动调用dispatch，调用了dispatch它就立刻执行。而如果是一个异步，则就会不符合dispatch要求，则报错。
• 函数的方式可以同步也可以异步，dispatch是你手动在需要的地方来调用
• 例如：4秒之后在执行这个dispatch通知执行

const mapDispatchToProps = dispatch =>
    return 
        add(n=1)
            setTimeout(()=>
                dispatch(type:"add",payload:n)
            ,4000)
        
    

---

做个总结，在没有扩展redux之前，使用和操作store数据到需要每次导出和导入，需要每次执行后去订阅与更新store，需要通过getstate方法获取数据。非常的麻烦。使用了react-redux之后，通过在父组件包裹APP组件，使用Provider组件将store当做属性源添加到Provider，在其子组件去配合connect高阶组件。完成将这个store的start数据源状态添加到组件的this.props上去，将方法也传到这个子组件的this.props上去。