react-redux-轻松搞定-1基础

2022-05-11 101

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： vuex指针对vue环境redux不止针对react环境，其他组件也能用,vue也能用react为了更好的使用封装了个库 react-reduxReact Redux 只针对reactcnpm i -S react-redux

1.前言

vuex指针对vue环境

redux不止针对react环境，其他组件也能用,vue也能用

react为了更好的使用封装了个库 react-redux

React Redux 只针对react

cnpm i -S react-redux

2.所有容器组件都可访问 Redux store

手动监听

props形式传入到所有容器组件中

但这太麻烦了，因为必须要用 store 把展示组件包裹一层，仅仅是因为恰好在组件树中渲染了一个容器组件

2.Provider

不必显式地传递它。只需要在渲染根组件时使用即可。

之前的redux写法删了

// redux存储器
import store from "./store"
import { Provider } from 'react-redux'
ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}> <App /></Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

3.基本组件结构

代码

import React, { Component } from 'react';
import {connect} from 'react-redux';
import { Link } from "react-router-dom"
class ComponentTest extends Component {
    render() {
        return (
            <div>
                <h1><Link to="/" >首页 </Link></h1>
                <button onClick={() => {
                }}>
                    修改 counter
                </button>
            </div>
        );
    }
}
// mstp 快捷键, 注意 自动生成的箭头函数 多个() 这里不需要
const mapStateToProps = (state, ownProps) => {
    // 自己查看参数，其实看名字也能看出来
    console.log("mapStateToProps-----------state", state)
    console.log("mapStateToProps-----------ownProps",ownProps)
    // 返回的这个对象,就是我们组件的props
    return {
    }
}
// 把订阅放到属性上
// mdtp快捷键
const mapDispatchToProps = (dispatch, ownProps) => {
        // 返回的这个对象,就是我们组建的props
    return {
    }
}
// connect:和store产生关联
export default connect(mapStateToProps,mapDispatchToProps)(ComponentTest);

4.获取值

render里面

<p>{ this.props.value}</p>

状态转为组件属性

state ---> props

const mapStateToProps = (state, ownProps) => {
    // 
    console.log("mapStateToProps-----------state", state)
    console.log("mapStateToProps-----------ownProps",ownProps)
    // 返回的这个对象,就是我们组件的props
    return {
         // 把counter存到value里面 
    // 返回的这个对象是组件的props
        value:state.counter
    }
}

5.修改值

render

<button onClick={() => {
          //    之前的监听是一样的
                    this.props.add()
                }}>
                    修改 counter
                </button>

把订阅放到属性上

const mapDispatchToProps = (dispatch, ownProps) => {
        // 返回的这个对象,就是我们组件的props
    // 所以在render 里面  this.props.add() 调用
    return {
        add: () => {
            // 这里边可以调用到 dispatch ,就可以发出 action 进行修改
            // 其他地方拿不到  store
            dispatch({type:"A",value:100})
        }
    }
}

6这段代码的常见问题

注意用快捷键 mstp 或者mdtp生产的箭头函数去掉函数体的()

监听不到状态的改变

错误原因type和store里面actiton不一样

store里面 reducer没有用深拷贝，

因为直接修改state在react-redux中监听不到修改

就是store里面的

// 深拷贝 state
            let tempState = JSON.parse(JSON.stringify(state))
            // 修改
            tempState.counter = tempState.counter + action.value
            // 返回修改后的状态
            return tempState