一文详解ReactNative状态管理redux-toolkit使用

 更新时间:2023年03月10日 09:08:34   作者:张拭心  
这篇文章主要为大家介绍了ReactNative状态管理redux-toolkit使用详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

正文

有同学反馈开发 ReactNative 应用时状态管理不是很明白,接下来几篇文章我们来对比下 React 及 ReactNative 状态管理常用的几种框架的使用和优缺点。

上一篇文章介绍了 redux 的使用,这篇文章我们来看下 redux 的升级版:redux-toolkit。

React 和 Redux-Toolkit 创建 Todo List App

下面是使用 React 和 Redux-Toolkit 创建一个简单的 Todo List App 的代码示例

完整代码见文章末尾

新建一个React应用

  • 首先,在命令行中输入以下命令新建一个React应用:
npx create-react-app todolist

安装 Redux-Toolkit 和 React-Redux:

npm install @reduxjs/toolkit react-redux

创建一个 todoSlice.ts 文件

在其中完成 action 和 reducer的创建「非常重要,需要保证理解」

import { createSlice, PayloadAction } from "@reduxjs/toolkit";
import { State, TODO } from "../module/todo";
const initState : State = {
    todos: [
        {
            text: "zsx clean room"
        }
    ]
};
//1.创建 Slice,每个业务一个 分片
const todoSlice = createSlice({
    name: 'todo',   // 这个名称似乎没啥用
    initialState: initState,
    //最重要的 reducers 属性,包括多个函数
    reducers: {
        addTodo: (state: State, action: PayloadAction<string>) => {
            return {
                todos: [...state.todos, {text: action.payload}]
            };
        },
        deleteTodo: (state: State, action: PayloadAction<string>) => {
            state.todos = state.todos.filter((item: TODO, index: number)=> {
                return item.text !== action.payload
            });
        }
    }
})
//2.导出 slice 的 action 和 reducer
export const {addTodo, deleteTodo} = todoSlice.actions;
export default todoSlice.reducer;

在上面的代码里,我们使用 redux-toolkit 的 createSlice 创建了一个分片,分片代表某个业务的数据状态处理,比如 todoSlice 就代表 todo 业务的所有状态处理。

createSlice 的参数,分别包括 name(名称,似乎没啥用)、initialState(项目初始状态)和 reducers,

其中 reducers 是最重要的,它就是一个对象:

    reducers: {
        addTodo: (...) => {
          //...
        },
        deleteTodo: (...) => {
          //...
        }
    }

对象的成员就是支持的 action 函数,比如添加 todo:

        addTodo: (state: State, action: PayloadAction<string>) => {
            //可以直接修改数据
            // state.todos.push({
            //     text: action.payload
            // })
            //也可以返回新的
            return {
                todos: [...state.todos, {text: action.payload}]
            };
        }

可以看到,上面的 addTodo 类似 redux 中的 reducer,不同的在于,createSlice 中不再需要根据 action type 进行 switch case 匹配,而是直接提供了函数,以执行状态。

需要注意的是,toolkit 中的 reducer 函数,可以修改原始状态(redux 本身是需要返回新状态的),这是因为它内部的特殊实现。

通过 createSlice 创建完 todoSlice 后,下一步就是导出其中的 action 和 reducer

export const {addTodo, deleteTodo} = todoSlice.actions;
export default todoSlice.reducer;

这里再次证明,slice 是 action 和 reducer 的封装,redux-toolkit 通过 slice 把 action 和 reducer 封装到了一起,不再需要单独创建 action 和 action creator。

通过 redux-toolkit,我们创建完 slice,就可以通过 slice 的 action 和 reducer 进行使用。

创建 store

import { configureStore } from "@reduxjs/toolkit";
import todoReducer from "./todoSlice";
//3.配置 store,创建全局唯一的 stroe
const store = configureStore({
    //多个 reducer,访问数据时也需要通过多层获取
    //这里的名称,决定了获取数据时,需要访问的对象名称
    reducer: {
        todo: todoReducer
    }
});
export default store;

和 redux 不同,redux-toolkit 使用 configureStore 创建 store,它的好处是当有多个 reducer 时更简单。

只需要在参数里提供一个 reducer 对象即可,有多少个业务,就给这个对象增加几个成员。

{
    //多个 reducer,访问数据时也需要通过多层获取
    //这里的名称,决定了获取数据时,需要访问的对象名称
    reducer: {
        todo: todoReducer,
        other: otherReducer
    }
}

最终业务在访问自己的数据时,通过 对象名称可以获取到数据。

上层组件通过 Provider 分发给组件树

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

这一点和 redux 一样,都是使用 react-redux 的 Provider 提供给子组件,参数就是上一步创建的 store。

ToolkitTodoApp 是下一步要创建的 UI 组件

通过useSelector 和 useDispatch 获取数据和分发行为

最后一步,业务组件中通过 useSelector 和 useDispatch 获取数据和分发行为:

import {useState} from "react";
import { useDispatch, useSelector } from "react-redux";
import { State, TODO } from "../module/todo";
import store from "./store";
import { addTodo, deleteTodo } from "./todoSlice";
type RootState = ReturnType<typeof store.getState>;
//业务通过 useSelector 获取数据;通过 useDispatch 分发
//比如使用 connect,更简单易懂
const ToolkitTodoApp = () => {
    //获取到的是全局的 State,需要通过 reducer 的名称获取到当前需要的状态
    const todos = useSelector((state: RootState) => {
        return state.todo.todos;
    });
    const dispatch = useDispatch();
    const [text, setText] = useState('');
    const handleInput = (e: any) => {
        setText(e.target.value)
    }
    const handleAddTodo = () => {
        //todoSlice 导出的 action, 参数就是 action.payload 的类型
        dispatch(addTodo(text))
        setText('')
    }
    const handleDeleteTodo = (text: string) => {
        dispatch(deleteTodo(text))
    }
    return (
        <div style={{display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center'}}>
            <h1>This Is Redux-Toolkit 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 onClick={handleAddTodo}>Add Todo</button>
            </div>
        </div>
    )
}
export default ToolkitTodoApp;

从上面的代码中可以看到,使用 redux-toolkit,组件里获取状态也更简单了,不再需要写 connect、mapStateToProps 和 mapDispatchToProps,只需要通过 react-redux 提供的 useSelector hook 即可:

    const todos = useSelector((state: RootState) => {
        return state.todo.todos;
    });

需要注意的是:useSelector 里筛选自己需要的数据时,需要通过 reducer 的名称获取到当前需要的状态,否则会出现字段取不到或者取错的情况。

比如上面的例子里,配置 store 时,todo 的 reducer 的名称叫 “todo”,那在 todo 业务里,通过useSelector 里获取它 state 时,就需要通过这个名称 “todo” 去拿字段:

const store = configureStore({
    //多个 reducer,访问数据时也需要通过多层获取
    //这里的名称,决定了获取数据时,需要访问的对象名称
    reducer: {
        todo: todoReducer
    }
});
state.todo.todos;

我一开始使用 redux-toolkit 的时候,就在这一步遇到了问题。

另外,使用 useDispatch 分发行为时也需要注意:传递的参数是 createSlice 后导出的 action,参数类型需要和 这个 action 的 payload 类型一样。

比如前面的 todoSlice 的 reducers 里,addTodo 的 action 类型是 PayloadAction:

addTodo: (state: State, action: PayloadAction<string>) => {...}

那在调用这个 action 时,就需要传递 string 类型的参数:

    const handleAddTodo = () => {
        //todoSlice 导出的 action, 参数就是 action.payload 的类型
        dispatch(addTodo(text))
        setText('')
    }
  • 通过 createSlice 创建 slice,在其中指定初始状态和支持的 action reducer
  • 导出 slice 的 actions 和 reducer
  • 通过 configureStore 创建 store,参数是一个对象,包括上一步导出的 reducer
  • 需要指定好业务名称,后续取数据要用
  • 通过 Provider 分发给组件树
  • 业务组件中通过 useSelector 和 useDispatch 获取数据和分发行为

可以看到,redux-toolkit 与 redux 相比,不需要创建 action creator 和 connect,简化了开发步骤。

完整代码:github.com/shixinzhang…

以上就是一文详解ReactNative状态管理redux-toolkit使用的详细内容,更多关于ReactNative状态管理redux-toolkit的资料请关注脚本之家其它相关文章!

相关文章

  • React Native中实现动态导入的示例代码

    React Native中实现动态导入的示例代码

    随着业务的发展,每一个 React Native 应用的代码数量都在不断增加。作为一个前端想到的方案自然就是动态导入(Dynamic import)了,本文介绍了React Native中实现动态导入的示例代码,需要的可以参考一下
    2022-06-06
  • React中的Refs属性你来了解吗

    React中的Refs属性你来了解吗

    这篇文章主要为大家详细介绍了的React Refs属性,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-03-03
  • 解决react-connect中使用forwardRef遇到的问题

    解决react-connect中使用forwardRef遇到的问题

    这篇文章主要介绍了解决react-connect中使用forwardRef遇到的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-05-05
  • React SSR架构Streaming Render与Selective Hydration解析

    React SSR架构Streaming Render与Selective Hydration解析

    这篇文章主要为大家介绍了React SSR架构Streaming Render与Selective Hydration解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • react redux入门示例

    react redux入门示例

    本篇文章主要介绍了react redux入门示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • React Router 中实现嵌套路由和动态路由的示例

    React Router 中实现嵌套路由和动态路由的示例

    React Router 是一个非常强大和灵活的路由库,它为 React 应用程序提供了丰富的导航和 URL 管理功能,能够帮助我们构建复杂的单页应用和多页应用,这篇文章主要介绍了React Router 中如何实现嵌套路由和动态路由,需要的朋友可以参考下
    2023-05-05
  • antd form表单如何处理自定义组件

    antd form表单如何处理自定义组件

    这篇文章主要介绍了antd form表单如何处理自定义组件问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • React事件处理的机制及原理

    React事件处理的机制及原理

    这篇文章主要介绍了React事件处理的机制及原理,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • react 源码中位运算符的使用详解

    react 源码中位运算符的使用详解

    这篇文章主要为大家详细介绍了react 位运算符,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-03-03
  • React竞态条件Race Condition实例详解

    React竞态条件Race Condition实例详解

    这篇文章主要为大家介绍了React竞态条件Race Condition实例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-11-11

最新评论