ReactNative状态管理redux-toolkit如何使用

今天小编给大家分享一下ReactNative状态管理redux-toolkit如何使用的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

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 和 reducerexport 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，创建全局唯一的 stroeconst 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'}}>            <h2>This Is Redux-Toolkit 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 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，简化了开发步骤。

以上就是“ReactNative状态管理redux-toolkit如何使用”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注编程网精选频道。