redux和mobx入門使用

adouwt發表於2021-05-07

Redux

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

以上是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), 如有錯誤，敬請指出，如需轉載清說明出處。感謝閱讀?

redux 和 mobX對比
2018-01-16
Redux
MobX入門
2017-12-22
Redux入門到使用
2019-03-23
Redux
React 入門-redux 和 react-redux
2021-01-24
ReactRedux
Mobx入門和較佳實踐
2018-12-19
個人愚見：Redux 和 Mobx 區別
2019-02-16
Redux
Redux入門
2019-02-18
Redux
Redux 入門
2016-10-31
Redux
Vuex、Flux、Redux、Redux-saga、Dva、MobX
2018-12-18
VueRedux
你需要Mobx還是Redux？
2018-02-11
Redux
你需要 Mobx 還是 Redux ？
2018-02-22
Redux
Redux入門教程
2019-05-11
Redux
萌新 redux 入門
2018-12-25
Redux
redux——入門1
2017-03-29
Redux
Mobx 與 Redux 的效能對比
2018-12-17
Redux
Redux vs Mobx系列(-)：immutable vs mutable
2018-03-15
Redux
Redux 入門 Demo：TodoList
2020-04-03
Redux
Redux 入門 -- 拆分 reducer
2018-04-17
Redux
redux 和 mobx 在渲染子元件的問題上的思考
2017-12-18
Redux元件
你再也不用使用 Redux、Mobx、Flux 等狀態管理了
2019-05-08
Redux
[譯】Redux入門教程（二）
2019-05-13
Redux
Redux-thunk快速入門
2019-03-04
Redux
redux 入門到實踐
2018-12-10
Redux
redux 中介軟體入門
2018-02-01
Redux
Redux 入門 -- 基礎用法
2018-04-16
Redux
傻瓜式入門Redux
2018-05-14
Redux
Redux 入門教程（3）：React-Redux 的用法
2016-09-23
ReduxReact
Redux 入門教程（三）：React-Redux 的用法
2016-09-21
ReduxReact
擺脫redux繁瑣操作，搭建mobx框架
2018-11-08
Redux框架
react-native + mobx 入門到放棄
2019-03-04
React
create-react-app+mobx入門初體驗
2018-11-12
ReactAPP
Redux 入門教程（1）：基本用法
2016-09-19
Redux
Redux 入門教程（一）：基本用法
2016-09-18
Redux
Redux 入門 -- 處理 async action
2018-04-18
Redux
我為什麼從Redux遷移到了Mobx
2017-11-29
Redux
談談 Redux 與 Mobx 思想的適用場景
2017-03-06
Redux
libevent入門和使用
2016-02-23
create-react-app + webpack + antd + less + mobx 的demo入門配置
2017-12-28
ReactAPPWeb

redux和mobx入門使用