您好,登錄后才能下訂單哦!
這篇文章主要介紹“ReactNative狀態(tài)管理rematch如何使用”的相關(guān)知識(shí),小編通過(guò)實(shí)際案例向大家展示操作過(guò)程,操作方法簡(jiǎn)單快捷,實(shí)用性強(qiáng),希望這篇“ReactNative狀態(tài)管理rematch如何使用”文章能幫助大家解決問(wèn)題。
下面是使用 React 和 rematch 創(chuàng)建一個(gè)簡(jiǎn)單的 Todo List App 的代碼示例,完整代碼見(jiàn)文章末尾:
首先,在命令行中輸入以下命令新建一個(gè) React 應(yīng)用:
npx create-react-app todolist
安裝 rematch 和 react-redux:
npm install @rematch/core react-redux
在其中繼承 rematch 的 Models,定義當(dāng)前業(yè)務(wù)的所有 model 類(lèi)型
import { Models } from "@rematch/core"; //導(dǎo)出當(dāng)前業(yè)務(wù)的所有 model 的類(lèi)型 export interface RootModel extends Models<RootModel> { //暫時(shí)先空著 } //創(chuàng)建并導(dǎo)出所有 model 的實(shí)例 export const models: RootModel = {}
在上面的代碼中,RootModel 是當(dāng)前業(yè)務(wù)的所有 model 接口。
rematch 中的 model 和 redux-toolkit 的 slice 概念類(lèi)似,都表示一個(gè)業(yè)務(wù)的初始狀態(tài)和支持的操作。
在其中使用 rematch 的 createModel 創(chuàng)建一個(gè) todo 的業(yè)務(wù) 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)建一個(gè) model(類(lèi)似 redux-toolkit 的 slice),包括一個(gè)業(yè)務(wù)的初始狀態(tài)、狀態(tài)處理和變更后的影響 //最核心的地方 ** export const todo = createModel<RootModel> () ({ name: 'todo', state: initState, //reducers 需要是純函數(shù):只依賴(lài)參數(shù)進(jìn)行計(jì)算,不使用外部數(shù)據(jù) reducers: { //與 toolkit 的 slice 不同,參數(shù)直接是 payload,更簡(jiǎn)單 addTodo: (state: State, payload: string) => { //返回新?tīng)顟B(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 概念類(lèi)似,在其中可以指定名稱(chēng)、初始狀態(tài) 和 reducers。
不同之處:
rematch 的 reducer,參數(shù)是 payload,而不是 action,更加直接
rematch 的 reducer,必須有返回值,否則會(huì)報(bào)錯(cuò)!
rematch 直接導(dǎo)出 createModel 的返回值,不需要分別導(dǎo)出 actions 和 reducer
再次強(qiáng)調(diào)一下,rematch 中使用 model 表示某個(gè)業(yè)務(wù)的狀態(tài)管理,我們剛才通過(guò) createModel 創(chuàng)建的 todo 是一個(gè) model,表示 todo 業(yè)務(wù)的狀態(tài)管理。
回到第三步創(chuàng)建的 models.ts 文件,把我們剛才創(chuàng)建的 todo 添加到 RootModel 的成員里:
import { Models } from "@rematch/core"; import {todo} from "./todo"; //導(dǎo)出當(dāng)前業(yè)務(wù)的所有 model 的類(lèi)型 export interface RootModel extends Models<RootModel> { //這里的名稱(chēng)就是后續(xù)調(diào)用 dispatch 的名稱(chēng) todo: typeof todo } //創(chuàng)建并導(dǎo)出所有 model 的實(shí)例 export const models: RootModel = {todo: todo}
通過(guò)上面的代碼,就可以知道,當(dāng)前所有業(yè)務(wù) model 里,有一個(gè)叫做“todo” 的 model。
同時(shí),導(dǎo)出的所有 model 的實(shí)例 models,也有一個(gè)成員 todo,它就是前面通過(guò) createModel 創(chuàng)建的 todo model。
import { init, RematchDispatch, RematchRootState } from "@rematch/core"; import { models, RootModel } from "./model/models"; //創(chuàng)建 store,參數(shù)就是所有業(yè)務(wù)的 model export const store = init({ models }) store.subscribe( () => { console.log('store update >>> ' + JSON.stringify(store.getState())) }) store.dispatch.todo.addTodo("add from store") //導(dǎo)出類(lèi)型,用于業(yè)務(wù)組件里使用 export type Store = typeof store export type Dispatch = RematchDispatch<RootModel> export type RootState = RematchRootState<RootModel>
從上面的代碼可以看到,init 函數(shù)的參數(shù)就是我們上一步導(dǎo)出的所有業(yè)務(wù) model 的對(duì)象 models。
init 返回的 store 本質(zhì)上就是 redux 的 store,因此和 redux store 一樣,也支持 subscribe 和 dispatch。
創(chuàng)建完 store 以后,我們還需要導(dǎo)出幾個(gè)類(lèi)型:Store Dispatch 和 RootState,他們用于在 typescript UI 組件里獲取狀態(tài)或者分發(fā)行為。
和其他庫(kù)一樣,通過(guò) react-redux 的 Provider 將 store 提供給組件樹(shù):
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> );
創(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è)務(wù)通過(guò) useSelector 獲取數(shù)據(jù);通過(guò) useDispatch 分發(fā) const RematchTodoApp = () => { //和 toolkit 類(lèi)似,需要根據(jù) model 名稱(chēng)訪(fǎng)問(wèn)數(shù)據(jù) //參數(shù)類(lèi)型就是 store 里導(dǎo)出的類(lèi)型 const todos = useSelector((state: RootState) => { return state.todo.todos; }); //和 toolkit 不同的在于,需要聲明類(lèi)型 //同時(shí)分發(fā)的時(shí)候也有些不同 const dispatch = useDispatch<Dispatch>(); const [text, setText] = useState(''); const handleInput = (e: any) => { setText(e.target.value) } const handleAddTodo = () => { // 分發(fā)的時(shí)候,通過(guò) dispatch.<model name>.<reducer name> 的方式調(diào)用,參數(shù)就是 payload 的類(lèi)型 //toolkit 里的寫(xiě)法:dispatch(addTodo(text)) dispatch.todo.addTodo(text) setText('') } const handleDeleteTodo = (text: string) => { //toolkit 里的寫(xiě)法:dispatch(deleteTodo(text)) dispatch.todo.deleteTodo(text) } return ( <div style={{display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center'}}> <h2>This Is Rematch TODO App.</h2> <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 獲取當(dāng)前業(yè)務(wù)需要的狀態(tài),因?yàn)槟玫降氖撬袠I(yè)務(wù)的數(shù)據(jù),因此需要通過(guò) todo 的業(yè)務(wù)名稱(chēng)獲取到屬于 todo 的數(shù)據(jù):
//和 toolkit 類(lèi)似,需要根據(jù) model 名稱(chēng)訪(fǎng)問(wèn)數(shù)據(jù) //參數(shù)類(lèi)型就是 store 里導(dǎo)出的類(lèi)型 RootState const todos = useSelector((state: RootState) => { return state.todo.todos; });
需要注意的是,state.todo.todos 里的「todo」是我們第五步在 models 里增加 todo model 時(shí) key 的名稱(chēng)。
隨后我們使用 useDispatch 獲取 dispatch,和 toolkit 不同的在于,需要聲明類(lèi)型:
const dispatch = useDispatch<Dispatch>(); const handleAddTodo = () => { // 分發(fā)的時(shí)候,通過(guò) dispatch.<model name>.<reducer name> 的方式調(diào)用,參數(shù)就是 payload 的類(lèi)型 //toolkit 里的寫(xiě)法:dispatch(addTodo(text)) dispatch.todo.addTodo(text) setText('') }
在分發(fā)行為的時(shí)候,toolkit 是這樣:dispatch(addTodo(text)),rematch 是這樣:dispatch.todo.addTodo(text) ,個(gè)人感覺(jué) rematch 這種略微好一點(diǎn),避免了層層嵌套。
關(guān)于“ReactNative狀態(tài)管理rematch如何使用”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí),可以關(guān)注億速云行業(yè)資訊頻道,小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。