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 和 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'}}>
            <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如何使用”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。