redux和mobx入门使用

项目涉及技术

公共插件

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，我们继续使用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());

整体效果图片，如下

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