redux和mobx入门使用-猿圈-程序猿的知识社区

redux和mobx与react-hook、react-router-dom综合使用

项目涉及技术

公共插件

create-react-app
react-dom
react-router
react-router-dom
react-hook

redux
react-redux

大概实现功能

组件调用
路由跳转
接口调用
状态管理

代码示例说明

redux 和 mobx 的层级结构如下

redux-mobx
├── README.md
├── mobx-demo
│ ├── README.md
│ ├── config-overrides.js
│ ├── package-lock.json
│ ├── package.json
│ ├── public
│ │ ├── favicon.ico
│ │ ├── index.html
│ │ ├── logo192.png
│ │ ├── logo512.png
│ │ ├── manifest.json
│ │ └── robots.txt
│ └── src
│ ├── App.css
│ ├── App.js
│ ├── App.test.js
│ ├── compments
│ │ ├── compnentA.js
│ │ └── compnentB.js
│ ├── index.css
│ ├── index.js
│ ├── logo.svg
│ ├── pages
│ │ ├── bar.js
│ │ └── foo.js
│ ├── reportWebVitals.js
│ ├── setupTests.js
│ └── store
│ ├── index.js
│ └── storeone.js
├── package-lock.json
└── redux-demo
├── README.md
├── package-lock.json
├── package.json
├── public
│ ├── favicon.ico
│ ├── index.html
│ ├── logo192.png
│ ├── logo512.png
│ ├── manifest.json
│ └── robots.txt
└── src
├── App.css
├── App.js
├── App.test.js
├── compments
│ ├── compnentA.js
│ └── compnentB.js
├── index.css
├── index.js
├── logo.svg
├── pages
│ ├── bar.js
│ └── foo.js
├── reportWebVitals.js
├── setupTests.js
└── store
├── index.js
└── reducer.js

项目基础脚手架使用 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(
    <Provider store = {store}>
        <React.StrictMode>
            <h1>redux-demo</h1>
            <HashRouter>
                <Switch>
                    <Route exact path="/foo" component={Foo}/>
                    <Route exact path="/bar" component={Bar}/>
                    <Route exact path="/" component={App} />
                </Switch>
            </HashRouter>
        </React.StrictMode>
    </Provider>,
    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(
    <Provider store = {store}>
        <React.StrictMode>
        <h1>mobx-demo</h1>
        <HashRouter>
            <Switch>
                <Route exact path="/foo" component={Foo}/>
                <Route exact path="/bar" component={Bar}/>
                <Route exact path="/" component={App} />
            </Switch>
        </HashRouter>
        </React.StrictMode>
    </Provider>,
    document.getElementById('root')
    );

    reportWebVitals();

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

2. 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));

5. 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());

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

上面的演示代码已上传 [github] (https://github.com/adouwt/redux-mobx), 如有错误，敬请指出，如需转载清说明出处。感谢阅读?

菜单 学习猿地 - LMONKEY

开通学习猿地VIP

尊享10项VIP特权 持续新增

知识通关挑战

打卡带练！告别无效练习

接私单赚外块

VIP优先接，累计金额超百万

学习猿地私房课免费学

大厂实战课仅对VIP开放

你的一对一导师

每月可免费咨询大牛30次

领取更多软件工程师实用特权

Java开发工程师

何以解忧，唯有 Java！

Python开发工程师

人生苦短我要学Python！

PHP开发工程师

PHP是世界上最好的编程语言!

GO开发工程师

想优雅的写程序，赶紧GO!

大数据开发工程师

弄大数据，就是在搞革命!

前端开发工程师

不仅最好，而且最全!

UI开发工程师

这个世界从来不缺少美，缺少你来创造美!

Linux运维工程师

不只是说说而已！

WEB前端1+X

不仅为考证，轻松做开发

计算机二级（C语言）

一切只为考证！

猿工手册

各种工具精挑细选

猿材料

各种工具精挑细选

猿代码

各种工具精挑细选

猿著课件

各种工具精挑细选

知识题库

知识闯关节节高，刷题涨知识！

阶段练习

单元测试知识学习状况秒掌握！

期末考试

期末测试，学习情况即刻知道！

面试题库

最新的企业技术人员招聘真题练习！

Java专区

2948篇 ｜ 24.5万人浏览

Python专区

2593篇 ｜ 19.5万人浏览

大数据专区

2948篇 ｜ 18.5万人浏览

PHP专区

3953篇 ｜ 27.5万人浏览

Go专区

1382篇 ｜ 12.5万人浏览

Web前端专区

1453篇 ｜ 31.5万人浏览

Linux云计算

1230篇 ｜ 4.5万人浏览

其他专区

53232篇文章 ｜ 11.5万人浏览

搜索

历史记录 清除记录

近期热搜

项目开发全程实录（电商EW_Shop）

8676 人 1年前

轻松学会Laravel-项目篇（商城API）

2022 人 1年前

Python数据分析2.0-金融

325 人 1年前

Python办公自动化2.0

241 人 1年前

使用账号登录

启用更安全省心的  微信登录

Java开发工程师

何以解忧，唯有 Java！

Python开发工程师

菜单学习猿地 - LMONKEY

尊享10项VIP特权持续新增

2948篇｜ 24.5万人浏览

2593篇｜ 19.5万人浏览

2948篇｜ 18.5万人浏览

3953篇｜ 27.5万人浏览

1382篇｜ 12.5万人浏览

1453篇｜ 31.5万人浏览

1230篇｜ 4.5万人浏览

53232篇文章｜ 11.5万人浏览

历史记录清除记录

2948篇｜ 24.5万人浏览

2593篇｜ 19.5万人浏览

2948篇｜ 18.5万人浏览

3953篇｜ 27.5万人浏览

1382篇｜ 12.5万人浏览

1453篇｜ 31.5万人浏览

1230篇｜ 4.5万人浏览

53232篇文章｜ 11.5万人浏览

项目基础脚手架使用 create-react-app 生成，新建三个文件夹，组件集components, 页面集 pages，以及状态管理集 store。