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
![[AI Google] 三种新方法利用 Gemini 提高 Google Workspace 的生产力](https://ucc.alicdn.com/tbo73ymmu5nmu_20240602_049e4c795c5e414e80cd03eef4e9cbfe.webp?x-oss-process=image/format,webp/resize,h_160,m_lfit)
