redux和mobx入门使用

最新推荐文章于 2023-08-14 23:08:46 发布
最新推荐文章于 2023-08-14 23:08:46 发布
阅读量269 收藏
点赞数
原文链接：https://www.cnblogs.com/adouwt/p/14742503.html
版权

项目基础脚手架使用 create-react-app 生成，新建三个文件夹，组件集components, 页面集 pages， 以及状态管理集 store。
1.App.js
import React from ‘react’;
import ReactDOM from ‘react-dom’;
import ‘./index.css’;
import reportWebVitals from ‘./reportWebVitals’;
import App from ‘./App’;
// 添加代码如下
import Foo from ‘./pages/foo’;
import Bar from ‘./pages/bar’;
import {HashRouter, Route, Switch } from ‘react-router-dom’
import {Provider} from ‘react-redux’;
import store from ‘./store/index’
ReactDOM.render(

<React.StrictMode>

redux-demo

</React.StrictMode>
,
document.getElementById(‘root’)
);
reportWebVitals();

引入页面Foo， Bar，路由 react-router-dom插件，以及状态管理 react-redux。状态统一管理 store/index.js，这里统一管理store。
通过Provider 传入 store，包裹所有组件，这样组件内部能拿到store数据。

注意
这里的 Switch组件，当匹配到一个路由的时候，就不用往下匹配，这个也是项目优化的一个部分。

2.store 处理
store
├── index.js
└── reducer.js

index.js
我这里演示的是一个reducer，如果是多个reducer 可以用 combineReducers 进行合并

import { createStore } from 'redux';
import reducer from './reducer';
export default createStore(reducer)

定义简单的action
reducer.js

const defaultState = {
    count: 1,
    pageName: "default page"
}

const Store = (state = defaultState, action) => {
    switch(action.type) {
        case 'COUNT_ADD':
            state.count += action.value;
            break;
        case 'COUNT_SUB':
            state.count -= action.value;
            break;
        case 'COUNT_MUTIL':
            state.count *= action.value;
            break;
        default:
            state.count = defaultState.count;
    }

    return {
        ...state
    }
}

export default  Store

3.页面路由 bar.js
import React from ‘react’;
import { connect } from ‘react-redux’;

// 组件B中获取count的值 
function Bar(props) {
    const { count, pageName} = props
    return <div>
        <h2>Bar</h2>
        <p>count: {count}</p>
        <p>pageName: {pageName}</p>
    </div>
}

const BarPage = connect(state => (
    state
))(Bar)

export default BarPage;

使用redux中 connect 将组件和store链接起来。connect 一共四个参数，可以看这个文章connect，这个组件里 我们只用里第一个参数，将store 中的值 传递给组件，这样 Bar 函数组件props里面就有我们传进来的数据。

4.页面路由 foo.js
import React, {useState, useEffect} from ‘react’;
import { connect } from ‘react-redux’
// 组件B中获取count的值
// http://localhost:4000/get/alluser 接口地址
const Foo = (props) => {
const { count } = props
const [ allData, setAllData ] = useState([]);
useEffect(()=>{
fetch(“http://localhost:4000/get/alluser”).then(res => {
res.json().then(data => {
setAllData(data.users)
})
})
},[])

    return <div>
        <h2>Foo</h2>
        <p>count: {count}</p>
        <ul>
            {allData.map((item,index)=>{
                return <li key={index}>
                    <p>{item.name}</p>
                    <img src={item.avatar_url} width="180"/>
                </li>
            })}
        </ul>
    </div>
}

const FooPage = connect(state => (
    {
        count: state.count
    }
))(Foo)

export default  FooPage

注意

这里的connect 第一个参数，跟上面的例子差不多，返回的是state 里面一个具体的值，这样可以控制页面组件里的具体数据。
HOOK 组件 使用useEffect 调用接口，获取数据，渲染页面。对于HOOK的使用 不是我们这节的重点，具体学习可以查看react-hook
5.组件 commentA.js
注意，重点

import React from 'react';
import { connect } from 'react-redux'
import { Link } from 'react-router-dom'

const CompnentA = (props) => {
    // const [count, SetCount] = useState(props.count)
    const addCount = () => {
        const  { changeCount } = props;
        changeCount({
            type: "COUNT_ADD",
            value: 3,
        })
    }
    const subCount = () => {
        const  { changeCount } = props;
        changeCount({
            type: "COUNT_SUB",
            value: 1,
        })
    }
    const mutilCountfun = () => {
        const {mutilCount} = props;
        mutilCount({
            type: 'COUNT_MUTIL',
            value: 10
        })
    }
    return <div>
        <h2>组件A</h2>
        <p><button onClick={addCount}>count +3</button></p>
        <p><button onClick={subCount}>count -1</button></p>
        <p><button onClick={mutilCountfun}>count * 10</button></p>
        <ul>
            <li><Link to="/foo">Foo 页面</Link></li>
            <li><Link to="/bar">Bar 页面</Link></li>
            <li><Link to="/">APP 主页面</Link></li>
        </ul>
    </div>
}

const Compnent = connect(null, dispatch => ({
    changeCount: ({type, value}) => dispatch({
        type,
        value, 
    }),
    mutilCount: ({type, value}) => dispatch({
        type,
        value
    })
}))(CompnentA)

export default Compnent

connect 第一个参数，因为不需要，我们没有传store进组件，第二个函数参数mapDispatchToProps，我们传递了一些action方法进去，这些方法会绑定到组件当中。
我们知道我们不能直接修改store 里面的数据，我们需要通过派发器（dispatch）派发一个动作（action），这也是唯一修改state的方法，
这个action方法会触发我们的reducer方法 ，根据对应的action，返回对应的state。

6.组件 comnentB.js
通过上面 componentA的操作，我们已经修改了state 值，在componentB 中就体现出来了，代码如下

import React  from 'react';
import { connect } from 'react-redux'

// 组件B中获取count的值 
function CompnentB(props) {
    const { count } = props
    return <div>
        <h2>组件B</h2>
        <p>count: {count}</p>
    </div>
}

const CompnentBB = connect(state => (
    {
        count: state.count
    }
))(CompnentB)

export default CompnentBB

整体效果，图片如下
redux-demo

以上是redux 部分的demo，我们继续使用mobx，整个项目复制一遍，我们修改下数据管理部分和页面使用状态数据部分，其他层级不变，开始的项目结构可以看出。
mobx-demo

  1. index.js
    import React from ‘react’;
    import ReactDOM from ‘react-dom’;
    import ‘./index.css’;
    import reportWebVitals from ‘./reportWebVitals’;

    import App from ‘./App’;
    import Foo from ‘./pages/foo’;
    import Bar from ‘./pages/bar’;
    import { configure } from “mobx”;
    import { Provider } from “mobx-react”;
    import store from ‘./store/index’
    import {HashRouter, Route, Switch } from ‘react-router-dom’
    configure({ enforceActions: “observed” });
    ReactDOM.render(

    <React.StrictMode>

    mobx-demo









    </React.StrictMode>
    ,
    document.getElementById(‘root’)
    );

    reportWebVitals();

这里主要是将redux 的Provider 替换成 mobx的Provider

  1. store/index
    store
    ├── index.js
    └── storeone.js

index.js
import StoreOne from “./storeone”;
class Store {
constructor() {
this.storeOne = StoreOne;
}
}
export default new Store();
storeone.js
import { observable, action, makeObservable } from ‘mobx’;
class appStore {
constructor() {
// 添加makeObservable mobx6.0 状态数据已经修改，但是页面没有更新，需要通过这个方法来强制更新数据
makeObservable(this)
}
// state
@observable count = 1;
@observable pageName = “default pageName”;

    // getter
    get skinWindow() {
        return {
        };
    }

    // action
    @action
    addCount(payload) {
        this.count += payload;
    }
    @action
    subCount(payload) {
        this.count -= payload;
    }

    @action
    mutilCountfun(payload) {
        this.count *= payload;
    }
}
const as = new appStore();
export default as

3.componentA 组件使用
import React from ‘react’;
import { Link } from ‘react-router-dom’
import { observer, inject } from ‘mobx-react’;

const CompnentA = (props) => {
    const {storeOne} =  props.store
    const addCount = () => {
        storeOne.addCount(3)
    }
    const subCount = () => {
        storeOne.subCount(1)
    }
    const mutilCountfun = () => {
        storeOne.mutilCountfun(10)
    }
    return <div>
        <h2>组件A</h2>
        <p><button onClick={addCount}>count +3</button></p>
        <p><button onClick={subCount}>count -1</button></p>
        <p><button onClick={mutilCountfun}>count * 10</button></p>
        <ul>
            <li><Link to="/foo">Foo 页面</Link></li>
            <li><Link to="/bar">Bar 页面</Link></li>
            <li><Link to="/">APP 主页面</Link></li>
        </ul>
    </div>
}

export default inject('store')(observer(CompnentA));

inject(‘store’)(observer(CompnentA)) => 可以理解为将store 注入 可监测的 CompnentA 中。

点击事件方法 addCount 它会触发 store 里面的 action 方法，

addCount(payload) {
    this.count += payload;
}

action 方法 修改 state上的数据，页面上的数据会及时刷新。

从这里我们就可以明显看出与redux的不同，不需要通过reducer 去根据不同的type 来修改state 上的数据，而是直接通过action方法直接修改。

4.其他页面使用mobx的姿势
export default inject(‘store’)(observer(Bar)); => 可以理解为将store 注入 可监测的 页面 Bar 中。

import React  from 'react';
import { inject, observer } from 'mobx-react';

// 组件B中获取count的值 
function Bar(props) {
    const { count, pageName} = props.store.storeOne
    return <div>
        <h2>Bar</h2>
        <p>count: {count}</p>
        <p>pageName: {pageName}</p>
    </div>
}

export default inject('store')(observer(Bar));
  1. create-react-app 生成的脚手架不支持@ 装饰器语法的方案。
    package.json 修改启动命令
    “scripts”: {
    “start”: “PORT=8000 react-app-rewired start”,
    “build”: “react-app-rewired build”,
    “test”: “react-app-rewired test”,
    “eject”: “react-app-rewired eject”
    },
    安装插件，
    npm install customize-cra react-app-rewired @babel/plugin-proposal-decorators --save

在src下 新建文件 config-overrides.js
const{override,addDecoratorsLegacy}=require(‘customize-cra’);
module.exports=override(addDecoratorsLegacy());
USB Microphone https://www.soft-voice.com/
Wooden Speakers https://www.zeshuiplatform.com/
亚马逊测评 www.yisuping.cn
深圳网站建设www.sz886.com

福伴
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
react——mobx和redux的区别
weixin_70623314的博客
08-04 1564
mobx和redux的区别
React 数据流方案专题（Redux、MobX）
前端高薪进击手记
12-28 1058
它的注册需要使用到redux的一个 applyMiddleware 方法，这个方法就是用来注册中间件的，该方法的返回值放在 createStore 方法的第二个参数中，这样一来，当组件去触发action的时候，这个中间件的代码就可以得到执行了。值得注意的是reduxjs/toolkit 它自己本身就已经内置了一些中间间，所以我们在配置自己的中间件时需要把本来内置的中间件获取到再跟我们自己要添加的中间件组合到一起，设置给 store 的 middleware 属性，它的值是一个数组。
mobx和redux对比
最新发布
AlgorithmHero的博客
08-14 379
总的来说，Mobx更适合那些希望在开发过程中更快地实现响应式状态管理的开发者，尤其是对于小到中等规模的应用。Redux则更适用于需要严格的数据流控制、可预测性和大型应用的场景。最终的选择取决于项目的需求、团队的偏好和开发者的经验水平。Mobx和Redux都是用于状态管理的JavaScript库，但它们在一些方面有所不同。
redux太繁琐？一文入门学会使用mobx简化项目的状态管理
胡乱学点东西
09-01 2741
redux太繁琐？一文入门学会使用mobx简化项目的状态管理 mobx是一个简单、可扩展状态工具，相比redux，具有以下特点 - 简洁、无模板代码（redux需要写大量模板代码） - 响应式数据，可直接修改（redux需要保证不可变） - 可直接处理异步（redux需要中间件处理异步） - 适合简单、规模不大的应用（redux约束强，更适合大型多人协作开发）......
React + Redux 开启 HMR/Hot Loader
Szh
09-01 517
首发于 http://szhshp.org/tech/2018/09/01/hmrwithreactandredux.html , 转载请注明 最近在用 React 以及 Redux 写几个项目, 使用的是官方 Create-React-App 的脚手架, 默认没有开启 HMR, 每次都要等他自动刷新也是挺烦的, 可以用这些方法实现热替换: Create-React-App 开...
redux-mobx:React Workshop。 N3XTCODER + Fitogram。 2018年6月20日，科隆
05-11
React车间N3XTCODER + Fitogram 2018年6月20日，科隆演示文稿： ： 开始使用是一个快速入门工具，可简化React项目的设置。 安装 git克隆这个仓库cd进入仓库npm install npm start 您也可以使用而不是npm 。有用的...
rsk-mobx:React入门套件-Mobx-地图
05-18
React Starter Kit —“” Web应用程序样板 是在 ， ， 和之上构建的用于Web开发的自以为是的样板，其中包含诸如 ， 和类的... feature / redux （ PR ）—同构Redux，作者Pavel Lang （请参阅如何集成Redux ）（基于
redux-lightweight:编写一种业务逻辑，而不是编写动作，动作类型和简化器
05-01
轻量级Redux 该库为您生成动作创建者，动作类型和... 这个库的灵感来自redux-actions和mobx 入门 安装$ npm install --save redux-lightweight 或者$ yarn add redux-lightweight 用法创建具有state属性作为初始状态
React资料和代码，初级入门学习必备
07-31
在03_依赖包中，可能会有React项目常用的外部库或工具，如React Router用于路由管理，Redux或MobX用于状态管理，或者Webpack和Babel用于构建和编译项目。了解这些依赖包的作用和用法，能帮助你搭建和管理更复杂的...
react-native-firebase-starter：使用Firebase，Mobx，CodePush，OneSignal和:heart_suit:制作的终极React Native启动器
02-05
使用Firebase，Mobx，Code-Push和OneSignal的终极React Native入门直接在手机上下载应用程序集成推送通知和代码部署，构建自己的Instagram + WhatsApp +聊天市场移动应用克隆内置 ：一种语言，JavaScript，一种源...
前端开发在线峰会
07-08
前端开发者线上培训峰会，来自Smashing Magazine、美国Hulu、百度、美团、去哪儿、广发证券的六位国内外前端讲师，与您解读前端热门技术及创新应用实践，涉及数据状态管理、响应式开发、代码多端复用等话题。 内容涉及Redux最佳实践、响应式布局全新探索、Redux or Mobx前端应用状态管理、美团点评多端复用实践、去哪儿网前端统一构建解决方案等。
Mobx与Redux的异同
WindrunnerMax
05-08 882
Mobx与Redux的异同 Mobx与Redux都是用来管理JavaScript应用的状态的解决方案，用以提供在某个地方保存状态、修改状态和更新状态，使我们的应用在状态与组件上解耦，我们可以从一个地方获得状态，在另一个地方修改，在其他地方得到他们更新后的状态。他们都遵循单一数据源的原则，这让我们更容易推断状态的值和状态的修改。当然他们并不一定要跟React绑定在一起，它们也可以在AngularJs和VueJs这些框架库里使用。 描述 Redux作者说过，如果你不知道是否需要Redux，那就是不需要。在判断是
Mobx总结以及mobx和redux区别
IT_bar的博客
05-16 271
这一点得益于Mobx的observable；对应的，Redux是用dispath进行广播，通过Provider和connect来比对前后差别控制更新粒度，有时需要自己写SCU；Mobx更加精细一点。 Mobx核心概念 Mobx的核心原理是通过action触发state的变化，进而触发state的衍生对象（computed value & Reactions）。 State 在Mobx中，State就对应业务的最原始状态，通过observable方法，可以使这些状态变得可观察。 通常支持被observ
React中使用状态管理mobx用法
qq_43440532的博客
11-15 811
mobx状态管理实现有两种写法: 装饰器写法和非装饰器写法, 官方推荐使用装饰器语法 (一): 非装饰器语法: 1, 下载安装模块 mobx 和 mobx-react cnpm i mobx mobx-react --save 2, 创建状态管理文件 /src/store/index.js 导入工具函数 import { observable, action } from "mobx"; 3, 定义状态管理仓库数据 和 数据更新函数 let appState = ...
React 状态管理库: Mobx
weixin_33775572的博客
07-07 316
React 是一个专注于视图层的库。React 维护了状态到视图的映射关系，开发者只需关心状态即可，由 React 来操控视图。 在小型应用中，单独使用 React 是没什么问题的。但在复杂应用中，容易碰到一些状态管理方面的问题，如： React 只提供了在内部组件修改状态的接口 setState。导致数据、业务逻辑和视图层耦合在组件内...
mobx 在ReactJS项目中的运用
热门推荐
u012125579的专栏
04-06 1万+
mobx 能干什么使用 react 写小型应用，数据、业务逻辑和视图的模块划分不是很细是没有问题的。在这个阶段，引入任何状态管理库，都算是奢侈的。但是随着页面逻辑的复杂度提升，在中大型应用中，数据、业务逻辑和视图，如果不能很好的划分，就很有可能出现维护难、性能低下的问题。业内比较成熟的解决方案有 redux，但是 redux 使用过程中，感觉较复杂和繁琐。那么为什么不简单一点呢？mobx 的核心理念
四种基本入门mobx+react 使用方法
lin_fightin的博客
02-02 1620
mobx mobx是比redux更轻量的一个库，个人理解而已，他比redux少了中间一层reduce，是直接action然后修改数据，更新视图。 1 第一种，通过decorate，这里需要引入两个api,分别是，还有一个decorate 定义一个类，通过decorate将该类的a监听起来，若想修改数据，必须通过action来修改数据，才是达到响应式更新。 使用的时候，需要引入 通过这个将我们的组件包裹起来 然后通过高阶组件将store的值传入组件内部，接着就可以在内部使用了。 修改数据必须调用类里面的
redux 和 mobX对比
weixin_34257076的博客
01-16 124
以下内容会严格遵循下面三个观点 这部分的每一个小块都是为了吹二者之一 要怎么黑另外一个才能更好的达到吹的效果 要吹得有理有据，黑得不带痕迹 为什么这两个库可以被用来对比 目的一致 都是状态管理库，用来管理应用的内部状态 受众大体一致 一般都会被用到react中，虽然说这并不是必须的，你当然也可以用到vue或者angular里，但是，大多数情况下，都不会这么做 可相互替...
mbox整合多个store
Wcharles666的博客
09-04 1280
1.store/index.js (根store) // 整合两个store import NativeStore from './nativeStore'; import IpcStore from './ipcStore'; const nativeStore = new NativeStore(); const ipcStore = new IpcStore(); export defa...
redux和mobx哪个好
05-18
这是一个有争议的问题，因为redux和mobx都有各自的优点和缺点。Redux有强大的调试工具和广泛的生态系统，适用于大型应用程序。而Mobx则更加简单易用，适合小型应用程序和快速原型设计。 个人而言，我认为选择Redux...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值