redux & react-redux结合使用 2024

redux & react-redux结合使用 2024

1.安装 redux react-redux

复制代码
yarn add redux && yarn add react-redux

2.编写reducer

js 复制代码
const initstate={count:0}
exports.reducer=(state=initstate,action)=>{
    switch (action.type){
        case "add_action":
            return {
                count: state.count+1
            }
        default:
            return state;
    }
}

3.编写store

js 复制代码
import {createStore} from "redux";
import {reducer} from '../reducer'
const store=createStore(reducer)
export default store

4.根组件引入provider

js 复制代码
import Home from "./pages/home";
import ComA from "./pages/ComA";
import ComB from "./pages/ComB";
import store from "./store";
import {Provider} from "react-redux";

function App() {
  return (
      <Provider store={store}>
          <div>
              <ComA/>
              <ComB/>
          </div>
      </Provider>
  );
}
export default App;

5.发送状态

js 复制代码
import React from "react";
import {connect} from "react-redux";
class ComA extends React.Component{
    handleClick=()=>{
        console.log(111)
        this.props.sendAction()
    }
    render() {
        return (
            <button onClick={this.handleClick}>+</button>
        )
    }
}
const mapDispatchToProps=(dispatch)=>{
    return {
        sendAction:()=>{
            dispatch({
                type:'add_action'
            })
        }
    }

}
export default connect(null,mapDispatchToProps)(ComA)

6.接收状态

js 复制代码
import React from "react";
import {connect} from "react-redux";
class ComB extends React.Component{
    render() {
        return (
            <button>{this.props.count}</button>
        )
    }
}
const mapStateToProps=state=>{
    return state
}
export default connect(mapStateToProps)(ComB)
相关推荐
pe7er几秒前
使用CDN、ImportMap增强Vue playground
前端
ze_juejin11 分钟前
Angular的懒加载由浅入深
前端
JSON_L11 分钟前
Vue 详情模块 4
前端·javascript·vue.js
码间舞17 分钟前
什么是Tearing?为什么React的并发渲染可能会有Tearing?
前端·react.js
gnip29 分钟前
做个交通信号灯特效
前端·javascript
小小小小宇29 分钟前
Webpack optimization
前端
尝尝你的优乐美31 分钟前
前端查缺补漏系列(二)JS数组及其扩展
前端·javascript·面试
咕噜签名分发可爱多33 分钟前
苹果iOS应用ipa文件安装之前?为什么需要签名?不签名能用么?
前端
她说人狗殊途1 小时前
Ajax笔记
前端·笔记·ajax
yqcoder1 小时前
33. css 如何实现一条 0.5 像素的线
前端·css