一文詳解ReactNative狀態(tài)管理rematch使用
引言
有同學反饋開發(fā) ReactNative 應用時狀態(tài)管理不是很明白，接下來幾篇文章我們來對比下 React 及 ReactNative 狀態(tài)管理常用的幾種框架的使用和優(yōu)缺點。
上一篇文章介紹了 redux 的升級版 redux-toolkit 的使用，這篇文章我們來看下社區(qū)里比較出名的 redux 的升級庫：rematch。
React 和 rematch 創(chuàng)建Todo List App
下面是使用 React 和 rematch 創(chuàng)建一個簡單的 Todo List App 的代碼示例，完整代碼見文章末尾：
- 首先，在命令行中輸入以下命令新建一個 React 應用：
npx create-react-app todolist
- 安裝 rematch 和 react-redux：
npm install @rematch/core react-redux
創(chuàng)建一個 models.ts 文件
- 在其中繼承 rematch 的 Models，定義當前業(yè)務的所有 model 類型
import { Models } from "@rematch/core";
//導出當前業(yè)務的所有 model 的類型
export interface RootModel extends Models<RootModel> {
//暫時先空著
}
//創(chuàng)建并導出所有 model 的實例
export const models: RootModel = {}
在上面的代碼中，RootModel 是當前業(yè)務的所有 model 接口。
rematch 中的 model 和 redux-toolkit 的 slice 概念類似，都表示一個業(yè)務的初始狀態(tài)和支持的操作。
創(chuàng)建一個 todo.ts 文件
- 在其中使用 rematch 的 createModel 創(chuàng)建一個 todo 的業(yè)務 model:
import { createModel } from "@rematch/core";
import { State, TODO } from "../../module/todo";
import { RootModel } from "./models";
const initState : State = {
todos: [
{
text: "zsx clean room, model init data"
}
]
};
//創(chuàng)建一個 model（類似 redux-toolkit 的 slice），包括一個業(yè)務的初始狀態(tài)、狀態(tài)處理和變更后的影響
//最核心的地方 **
export const todo = createModel<RootModel> () ({
name: 'todo',
state: initState,
//reducers 需要是純函數(shù)：只依賴參數(shù)進行計算，不使用外部數(shù)據(jù)
reducers: {
//與 toolkit 的 slice 不同，參數(shù)直接是 payload，更簡單
addTodo: (state: State, payload: string) => {
//返回新狀態(tài)
return {
...state,
todos: [...state.todos, {text: payload}]
};
},
deleteTodo: (state: State, payload: string) => {
const todos = state.todos.filter((item: TODO, index: number)=> {
return item.text !== payload
});
return {
...state,
todos
}
}
},
})
從上面的代碼中我們可以看到，rematch 中的 model 和 redux-toolkit 的 slice 概念類似，在其中可以指定名稱、初始狀態(tài) 和 reducers。
不同之處：
- rematch 的 reducer，參數(shù)是 payload，而不是 action，更加直接
- rematch 的 reducer，必須有返回值，否則會報錯！
- rematch 直接導出 createModel 的返回值，不需要分別導出 actions 和 reducer
再次強調一下，rematch 中使用 model 表示某個業(yè)務的狀態(tài)管理，我們剛才通過 createModel 創(chuàng)建的 todo 是一個 model，表示 todo 業(yè)務的狀態(tài)管理。
回到第三步創(chuàng)建的 models.ts 文件，把我們剛才創(chuàng)建的 todo 添加到 RootModel 的成員里：
import { Models } from "@rematch/core";
import {todo} from "./todo";
//導出當前業(yè)務的所有 model 的類型
export interface RootModel extends Models<RootModel> {
//這里的名稱就是后續(xù)調用 dispatch 的名稱
todo: typeof todo
}
//創(chuàng)建并導出所有 model 的實例
export const models: RootModel = {todo: todo}
通過上面的代碼，就可以知道，當前所有業(yè)務 model 里，有一個叫做“todo” 的 model。
同時，導出的所有 model 的實例 models，也有一個成員 todo，它就是前面通過 createModel 創(chuàng)建的 todo model。
使用 rematch 的 init 函數(shù)創(chuàng)建 store
import { init, RematchDispatch, RematchRootState } from "@rematch/core";
import { models, RootModel } from "./model/models";
//創(chuàng)建 store，參數(shù)就是所有業(yè)務的 model
export const store = init({
models
})
store.subscribe( () => {
console.log('store update >>> ' + JSON.stringify(store.getState()))
})
store.dispatch.todo.addTodo("add from store")
//導出類型，用于業(yè)務組件里使用
export type Store = typeof store
export type Dispatch = RematchDispatch<RootModel>
export type RootState = RematchRootState<RootModel>
從上面的代碼可以看到，init 函數(shù)的參數(shù)就是我們上一步導出的所有業(yè)務 model 的對象 models。
init 返回的 store 本質上就是 redux 的 store，因此和 redux store 一樣，也支持 subscribe 和 dispatch。
創(chuàng)建完 store 以后，我們還需要導出幾個類型：Store Dispatch 和 RootState，他們用于在 typescript UI 組件里獲取狀態(tài)或者分發(fā)行為。
和其他庫一樣，通過 react-redux 的 Provider 將 store 提供給組件樹：
import RematchTodoApp from './rematch/RematchTodoApp';
import { store } from './rematch/store';
const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement
);
//分發(fā)給子元素
root.render(
<Provider store={store}>
<RematchTodoApp/>
</Provider>
);
RematchTodoApp 要創(chuàng)建UI 組件
創(chuàng)建 UI 組件，在其中使用 react-redux 的 useSelector 和 useDispatch 獲取狀態(tài)和分發(fā)行為：
import {useState} from "react";
import { useDispatch, useSelector } from "react-redux";
import { TODO } from "../module/todo";
import { Dispatch, RootState } from "./store";
//業(yè)務通過 useSelector 獲取數(shù)據(jù)；通過 useDispatch 分發(fā)
const RematchTodoApp = () => {
//和 toolkit 類似，需要根據(jù) model 名稱訪問數(shù)據(jù)
//參數(shù)類型就是 store 里導出的類型
const todos = useSelector((state: RootState) => {
return state.todo.todos;
});
//和 toolkit 不同的在于，需要聲明類型
//同時分發(fā)的時候也有些不同
const dispatch = useDispatch<Dispatch>();
const [text, setText] = useState('');
const handleInput = (e: any) => {
setText(e.target.value)
}
const handleAddTodo = () => {
// 分發(fā)的時候，通過 dispatch.<model name>.<reducer name> 的方式調用，參數(shù)就是 payload 的類型
//toolkit 里的寫法：dispatch(addTodo(text))
dispatch.todo.addTodo(text)
setText('')
}
const handleDeleteTodo = (text: string) => {
//toolkit 里的寫法：dispatch(deleteTodo(text))
dispatch.todo.deleteTodo(text)
}
return (
<div style={{display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center'}}>
<h1>This Is Rematch TODO App.</h1>
<ul>
{todos && todos.map((todo: TODO, index: any) => {
return (
<li key={index}>
<span>{todo.text}</span>
<button style={{marginLeft: '12px'}} onClick={() => handleDeleteTodo(todo.text)}>finish</button>
</li>
)
})}
</ul>
<div style={{display: 'flex', flexDirection: 'row'}}>
<input value={text} onChange={handleInput}/>
<button style={{marginLeft: '12px'}} onClick={handleAddTodo}>Add Todo</button>
</div>
</div>
)
}
export default RematchTodoApp;
在上面的代碼中，我們使用 useSelector 獲取當前業(yè)務需要的狀態(tài)，因為拿到的是所有業(yè)務的數(shù)據(jù)，因此需要通過 todo 的業(yè)務名稱獲取到屬于 todo 的數(shù)據(jù)：
//和 toolkit 類似，需要根據(jù) model 名稱訪問數(shù)據(jù)
//參數(shù)類型就是 store 里導出的類型 RootState
const todos = useSelector((state: RootState) => {
return state.todo.todos;
});
需要注意的是，state.todo.todos 里的「todo」是我們第五步在 models 里增加 todo model 時 key 的名稱。
隨后我們使用 useDispatch 獲取 dispatch，和 toolkit 不同的在于，需要聲明類型：
const dispatch = useDispatch<Dispatch>();
const handleAddTodo = () => {
// 分發(fā)的時候，通過 dispatch.<model name>.<reducer name> 的方式調用，參數(shù)就是 payload 的類型
//toolkit 里的寫法：dispatch(addTodo(text))
dispatch.todo.addTodo(text)
setText('')
}
在分發(fā)行為的時候，toolkit 是這樣：dispatch(addTodo(text))，rematch 是這樣：dispatch.todo.addTodo(text) ，個人感覺 rematch 這種略微好一點，避免了層層嵌套。
總結
通過 rematch 管理狀態(tài)分這幾步：
- 繼承 rematch 的 Models，定義當前業(yè)務的所有 model 類型
- 使用 rematch 的 createModel 創(chuàng)建一個 todo 的業(yè)務 model，聲明初始化狀態(tài)、reducers
- 每個 reducer 的參數(shù)是 state 和 payload，必須有返回值
- 使用 rematch 的 init 函數(shù)創(chuàng)建 store，參數(shù)就是所有 model
- 導出 RematchDispatch RematchRootState 和 store 的類型
- 通過 Provider 分發(fā)給組件樹
- 在 UI 組件中使用 react-redux 的 useSelector 和 useDispatch 獲取狀態(tài)和分發(fā)行為
可以看到，rematch 和 redux-toolkit 有很大的相似度。
以上就是一文詳解ReactNative狀態(tài)管理rematch使用的詳細內(nèi)容，更多關于ReactNative狀態(tài)管理rematch的資料請關注腳本之家其它相關文章！
相關文章
使用React Native創(chuàng)建以太坊錢包實現(xiàn)轉賬等功能
這篇文章主要介紹了使用React Native創(chuàng)建以太坊錢包，實現(xiàn)轉賬等功能，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-07-07
如何去除富文本中的html標簽及vue、react、微信小程序中的過濾器
這篇文章主要介紹了如何去除富文本中的html標簽及vue、react、微信小程序中的過濾器,在vue及react中經(jīng)常會遇到，今天通過實例代碼給大家講解，需要的朋友可以參考下2018-11-11
React項目通常都有很多的URL需要管理，最常使用的解決方案就是React Router了，本篇文章主要介紹了React路由管理之React Router總結，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
React?Native中原生實現(xiàn)動態(tài)導入的示例詳解
在React?Native社區(qū)中,原生動態(tài)導入一直是期待已久的功能,在這篇文章中,我們將比較靜態(tài)和動態(tài)導入,學習如何原生地處理動態(tài)導入,以及有效實施的最佳實踐,希望對大家有所幫助2024-02-02
這篇文章主要為大家詳細介紹了React實現(xiàn)表格選取，類似于Excel選中一片區(qū)域并獲得選中區(qū)域的所有數(shù)據(jù)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
react中的key屬性,它是一個特殊的屬性,它是出現(xiàn)不是給開發(fā)者用的,而是給React自己使用,有了key屬性后,就可以與組件建立了一種對應關系,本文主要介紹了React中Key屬性作用,具有一定的參考價值,感興趣的可以了解一下2024-01-01
本文主要介紹了淺談React useDebounce 防抖原理，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-08-08
React組件分為函數(shù)組件與class組件；函數(shù)組件是無狀態(tài)組件，class稱為類組件；函數(shù)組件只有props，沒有自己的私有數(shù)據(jù)和生命周期函數(shù)；class組件有自己私有數(shù)據(jù)(this.state) 和 生命周期函數(shù)2022-09-09
這篇文章主要為大家介紹了Header組件熱門搜索欄的實現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-04-04
這篇文章主要介紹了使用React.forwardRef傳遞泛型參數(shù)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05