一文详解ReactNative状态管理rematch使用

npx create-react-app todolist

npm install @rematch/core react-redux

import { Models } from "@rematch/core";
//导出当前业务的所有 model 的类型
export interface RootModel extends Models<RootModel> {
  //暂时先空着
}
//创建并导出所有 model 的实例
export const models: RootModel = {}

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"
        }
    ]
};
//创建一个 model（类似 redux-toolkit 的 slice），包括一个业务的初始状态、状态处理和变更后的影响
//最核心的地方 **
export const todo = createModel<RootModel> () ({
    name: 'todo',
    state: initState,
    //reducers 需要是纯函数：只依赖参数进行计算，不使用外部数据
    reducers: {
        //与 toolkit 的 slice 不同，参数直接是 payload，更简单
        addTodo: (state: State, payload: string) => {
            //返回新状态
            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
            }
        }
    },
})

import { Models } from "@rematch/core";
import {todo} from "./todo";
//导出当前业务的所有 model 的类型
export interface RootModel extends Models<RootModel> {
    //这里的名称就是后续调用 dispatch 的名称
    todo: typeof todo
}
//创建并导出所有 model 的实例
export const models: RootModel = {todo: todo}

import { init, RematchDispatch, RematchRootState } from "@rematch/core";
import { models, RootModel } from "./model/models";
//创建 store，参数就是所有业务的 model
export const store = init({
    models
})
store.subscribe( () => {
    console.log('store update >>> ' + JSON.stringify(store.getState()))
})
store.dispatch.todo.addTodo("add from store")
//导出类型，用于业务组件里使用
export type Store = typeof store
export type Dispatch = RematchDispatch<RootModel>
export type RootState = RematchRootState<RootModel>

import RematchTodoApp from './rematch/RematchTodoApp';
import { store } from './rematch/store';
const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
//分发给子元素
root.render(
  <Provider store={store}>
    <RematchTodoApp/>
  </Provider>
);

import {useState} from "react";
import { useDispatch, useSelector } from "react-redux";
import { TODO } from "../module/todo";
import { Dispatch, RootState } from "./store";
//业务通过 useSelector 获取数据；通过 useDispatch 分发
const RematchTodoApp = () => {
    //和 toolkit 类似，需要根据 model 名称访问数据
    //参数类型就是 store 里导出的类型
    const todos = useSelector((state: RootState) => {
        return state.todo.todos;
    });
    //和 toolkit 不同的在于，需要声明类型
    //同时分发的时候也有些不同
    const dispatch = useDispatch<Dispatch>();
    const [text, setText] = useState('');
    const handleInput = (e: any) => {
        setText(e.target.value)
    }
    const handleAddTodo = () => {
        // 分发的时候，通过 dispatch.<model name>.<reducer name> 的方式调用，参数就是 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;

    //和 toolkit 类似，需要根据 model 名称访问数据
    //参数类型就是 store 里导出的类型 RootState
    const todos = useSelector((state: RootState) => {
        return state.todo.todos;
    });

    const dispatch = useDispatch<Dispatch>();
    const handleAddTodo = () => {
        // 分发的时候，通过 dispatch.<model name>.<reducer name> 的方式调用，参数就是 payload 的类型
        //toolkit 里的写法：dispatch(addTodo(text))
        dispatch.todo.addTodo(text)
        setText('')
    }