美文网首页
reduex选型

reduex选型

作者: spfi | 来源:发表于2022-07-18 09:20 被阅读0次

    React项目状态管理选型

    1. 全面拥抱typescript，需要对typescript友好。
    2. 使用简单，不要太复杂，轻量。
    3. 支持模块化，支持集中管理。
    4. 使用人数多。

    常用redux对比

    下载量前三的三个状态管理库

    库名 github start github used 周下载量
    React Redux 22.2k 2.1m 5,718,723
    redux-toolkit 8.1k 274k 1,664,877
    mobx 25.4k 106k 903,357

    去年7月份redux-toolkit与mobx下载量情况如下

    库名 github start github used 周下载量
    redux-toolkit 5.9k 83.2k 755,564
    mobx 23.9k 83.9k 671,787

    分析：react-redux下载量，使用量均排第一，主要原因应该是先发优势，很多其他状态管理器库依赖react-redux，tookit是官方状态管理库，使用量目前最大，并且可以通过指令生成带有tookit状态管理器的项目（npx create-react-app --template redux ，npx create-react-app --template redux-typescript）；mobx也是一个非常优秀的react状态管理库，主要优点是使用简单。

    常用redux基本使用

    一、redux-toolkit的基本使用

    1、安装依赖包
    npm install @reduxjs/toolkit react-redux
    2、配置store

    在store目录下新建index.ts文件，代码如下：

    import { configureStore } from '@reduxjs/toolkit'

export const store = configureStore({
  reducer: {},
})

// Infer the `RootState` and `AppDispatch` types from the store itself
export type RootState = ReturnType<typeof store.getState>
// Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}
export type AppDispatch = typeof store.dispatch

    修改主页index.tsx文件如下：

    import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { Provider } from 'react-redux';
import { store } from './store/tookit/index';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);

// redux-toolkit
root.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

    创建scounterSlice文件，在store目录下，features/counter/counterSlice.ts

    import { createSlice } from '@reduxjs/toolkit'
import type { PayloadAction } from '@reduxjs/toolkit'

export interface CounterState {
  value: number
}

const initialState: CounterState = {
  value: 0,
}

export const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    increment: (state) => {
      // Redux Toolkit allows us to write "mutating" logic in reducers. It
      // doesn't actually mutate the state because it uses the Immer library,
      // which detects changes to a "draft state" and produces a brand new
      // immutable state based off those changes
      state.value += 1
    },
    decrement: (state) => {
      state.value -= 1
    },
    incrementByAmount: (state, action: PayloadAction<number>) => {
      state.value += action.payload
    },
  },
})

// Action creators are generated for each case reducer function
export const { increment, decrement, incrementByAmount } = counterSlice.actions

export default counterSlice.reducer

    修改store/toolkit目录下index.ts

    import counterReducer from "./features/counter/counterSlice";


export const store = configureStore({
    reducer: {
        counter: counterReducer
    }
});
    3、新建Counter组件

    目录：src/conponent/Counter.tsx

    import React, { Component } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { decrement, increment, incrementByAmount } from '../store/tookit/features/counter/counterSlice';
import type { RootState } from '../store/tookit/index';
import './counter.css';

type Props = {}

function Counter({ }: Props) {
    const count = useSelector((state: RootState) => state.counter.value);
    const dispatch = useDispatch();
    return (
        <div>
            <div>{count}</div>
            <div className='button'>
                <button onClick={() => dispatch(increment())}>+</button>
                <button onClick={() => dispatch(decrement())}>-</button>
                <button onClick={() => dispatch(incrementByAmount(5))}>+5</button>
            </div>
        </div>
    )
}

export default Counter
    4、在App.tsx引入Counter组件
    import React from 'react';
import './App.css';
import Counter from './components/Counter';

function App() {
  
  return (
    <div className="App">
      <Counter />
    </div>
  );
}

export default App;
    5、异步操作
    import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
import type { PayloadAction } from '@reduxjs/toolkit'

export interface CounterState {
    value: number
}

const initialState: CounterState = {
    value: 0
};

export const counterSlice = createSlice({
    name: 'counter',
    initialState,
    reducers: {
        increment: (state) => {
            state.value += 1;
        },
        decrement: (state) => {
            state.value -= 1;
        },
        incrementByAmount: (state, action: PayloadAction<number>) => {
            state.value += action.payload;
        }
    }, 
    extraReducers(builder) {
        builder.addCase(incrementAsync.fulfilled, (state, { payload }) => {
            state.value += payload;
        })
    }
});

export const incrementAsync = createAsyncThunk<number>(
    'incrementAsync',
    async (): Promise<number> => {
        const res: any = await new Promise<number>(r => {
            setTimeout(() => {
                r(2);
            }, 2000);
            
        });
        return res;
    }
)

export const { increment, decrement, incrementByAmount } = counterSlice.actions

export default counterSlice.reducer

    // import React, { Component } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { decrement, increment, incrementByAmount, incrementAsync } from '../store/tookit/features/counter/counterSlice';
import type { AppDispatch, RootState } from '../store/tookit/index';
import './counter.css';

// type Props = {}

function Counter() {
    const count = useSelector((state: RootState) => state.counter.value);
    const dispatch: AppDispatch = useDispatch();
    
    return (
        <div>
            <div>{count}</div>
            <div className='button'>
                <button onClick={() => dispatch(increment())}>+</button>
                <button onClick={() => dispatch(decrement())}>-</button>
                <button onClick={() => dispatch(incrementByAmount(5))}>+5</button>
                <button onClick={() => dispatch(incrementAsync())}>+2</button>
            </div>
        </div>
    )
}

export default Counter

    二、mobx基本使用

    1、安装mobx依赖包
    • mobx：核心库
    • mobx-react-lite：仅支持函数组件
    • mobx-react：既支持函数组件，也支持函数组件
    npm install mobx mobx-react-lite
    2、新建store目录，再建counter目录，在该目录下新建counter.store.ts
    import { makeAutoObservable } from "mobx";

// 1、定义数据
export class CounterStore {
    count: number = 0;
    constructor() {
        makeAutoObservable(this);
    }

    increment() {
        this.count++;
    }

    decrement() {
        this.count--;
    }
}
    3、在store根目录，在目录下面新建index.ts统一管理store
    import { CounterStore } from './counter/counter.store';
import React from 'react';

class RootStore {
    public counterStore: any;
    constructor() {
        this.counterStore = new CounterStore();
    }
}

// 实例化操作
const rootStore = new RootStore();
// 使用react context机制 完成统一方法封装；
// Provider value ={传递的数据}
// 查找机制：useContext 优先从Provider value找 如果找不到 就会手
// createContet方法传递过来的默认参数
const context = React.createContext(rootStore);
// 这个方法作用：通过useContext拿到rootStorre实例对象  然后返回
// 只要在业务组件中 调用useStore() -> rootStore
const useStore = () => React.useContext(context);

export { useStore };
    4、使用store

    新建MobxCounter.tsx组件，代码如下

    import { observer } from 'mobx-react-lite';
import React from 'react'
import './counter.css';
import { useStore } from '../store/mobx/index';

type Props = {}

function MobxCounter({ }: Props) {
    const { counterStore } = useStore();
    return (
        <div>
            <div>{counterStore.count}</div>
            <div className='button'>
                <button onClick={() => counterStore.increment()}>+</button>
                <button onClick={() => counterStore.decrement()}>-</button>
            </div>
        </div>
    )
}
// 使用observer是关键
export default observer(MobxCounter)

    三、redux-react基本使用

    1、安装依赖
    npm i redux react-redux @types/react-redux
    2、新建常量文件store/redux/contant/index.ts，代码如下：
    export const ADD = 'ADD';
export type ADD = typeof ADD;

export const LESSEN = 'LESSEN';
export type LESSEN = typeof LESSEN;
    3、新建action文件store/redux/actions/index.ts，代码：
    import { ADD, LESSEN } from "../constants";

export interface ADDAction {
    type: ADD
}

export interface LESSENAction {
    type: LESSEN
}

export type ModifyAction = ADDAction | LESSENAction;

// 增加state次数的方法
export const add = ():ADDAction => ({
    type: ADD
})
export const lessen = ():LESSENAction => ({
    type: LESSEN
})
    4、新建counter.reducer.ts文件
    import { ModifyAction } from '../actions/index';
import { ADD, LESSEN } from '../constants/index';

export const counterReducer = (state = 0, action: ModifyAction) => {
    switch (action.type) {
        case ADD:
            return state + 1;
        case LESSEN:
            return state - 1;
        default:
            return state;
    }
}
    5、在store/redux目录下面新建index.ts文件，用于集中管理reducer
    import { createStore } from "redux";
import { rootReducer } from './reducers/index';

const store = createStore(rootReducer);

export default store;
    6、新建ReduxCounter.tsx组件
    import React from 'react'
import './counter.css';
import { connect } from 'react-redux'
import { Dispatch } from 'redux'
import { add, lessen } from '../store/redux/actions/index';

type Props = {
    // value: number,
    // onIncrement: () => void,
    // onDecrement: () => void
}

function ReduxCounter(props: any) {
    const { value, onadd, onlesen } = props;
    return (
        <div>
            <div>{value.counter}</div>
            <div className='button'>
                <button onClick={() => onadd()}>+</button>
                <button onClick={() => onlesen()}>-</button>
            </div>
        </div>
    )
}
// mapStateToprops 方法用于映射状态；
const mapStateToProps = (state: number): { value: number } => ({
    value: state
})
// mapDispatchToProps 方法用于映射操作状态的方法
const mapDispatchToProps = (dispatch: Dispatch) => ({
    onadd: () => dispatch(add()),
    onlesen: () => dispatch(lessen())
})

export default connect(mapStateToProps, mapDispatchToProps)(ReduxCounter)
    7、在主入口index.tsx添加Provider
    import { Provider } from 'react-redux'
import store from './store/redux/index';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);

// redux-toolkit redux
root.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>
);

    常用redux总结

    redux/toolkit 优点

    1. 流程规范，需要按照规范进行开发。
    2. 函数式编程，在 reducer 中，接受输入，然后输出，不会有副作用发生，幂等性。
    3. 可追踪性，很容易追踪产生 BUG 的原因。

    redux 缺点（tookit已解决）

    1. 配置 Redux store 过于复杂
    2. 须添加很多软件包才能开始使用 Redux 做事情
    3. Redux 有太多样板代码

    mobx 优点

    1. 开发简单，class 中管理 state、action，基于 Proxy 实现的数据响应式。
    2. 使组件更加颗粒化拆分，并且业务更加容易抽象。

    mobx 缺点

    1. 过于自由，mobx 提供的约定及模版代码很少，如果团队不做一些约定，容易导致团队代码风格不统一。

    相关文章

      网友评论

          本文标题：reduex选型

          本文链接：https://www.haomeiwen.com/subject/ycbrirtx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|reduex选型|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！