從零開始學習 Redux：React Native 項目中的狀態管理

Redux 是一個用于 JavaScript 應用程序的狀態管理庫，通常與 React 或 React Native 配合使用，幫助管理應用的狀態和數據流。其核心原理是通過集中式的“單一數據源”來管理應用狀態，避免組件之間的“層層傳遞”狀態和副作用。

Redux 的原理

單一數據源（Store）
Redux 維護一個全局狀態樹（即 Store），所有組件都通過讀取這個狀態樹來獲取數據。應用中的所有狀態（數據）都存儲在這個單一的 store 中，這樣可以保證應用狀態的一致性。
State 是只讀的
在 Redux 中，整個應用的狀態是只讀的，你不能直接修改狀態。要改變狀態，必須通過觸發 action 來執行。
Actions
Action 是描述要發生什么的普通 JavaScript 對象，通常包含 type 字段（標識該 Action 的類型），可能還會包含其他數據（payload）。例如：
```
{type: 'ADD_TODO',payload: 'Buy milk'
}
```
Actions 是 Redux 的唯一方式來改變 state。
Reducers
Reducer 是純函數，用來指定如何根據不同的 action 來更新 state。它接收當前的 state 和 action，然后返回一個新的 state。Reducer 不會直接修改原始 state，而是返回一個新的對象，確保 Redux 的不可變性原則。
```
const todosReducer = (state = [], action) => {switch (action.type) {case 'ADD_TODO':return [...state, action.payload];default:return state;}
};
```
Dispatch
dispatch 是一個函數，允許你發送 Action 到 Redux store。這樣就會觸發相應的 Reducer 來更新 state。
Store
Store 是 Redux 中的核心，它保存了應用的狀態，并允許你獲取狀態、發送 Action、以及訂閱狀態變化。通常，我們通過 createStore() 創建一個 store。
```
import { createStore } from 'redux';
const store = createStore(todosReducer);
```
訂閱（Subscribe）
組件可以通過訂閱 store 來獲取狀態的更新，通常使用 store.subscribe() 方法。Redux 與 React 的集成通常通過 React-Redux 庫來簡化訂閱和更新的過程。

什么時候使用 Redux 管理狀態

Redux 主要適用于以下幾種情況：

多個組件共享狀態
如果應用中的多個組件需要訪問或修改相同的數據，Redux 可以有效地避免數據傳遞問題，確保所有組件共享的是一致的狀態。
復雜的狀態邏輯
如果應用的狀態邏輯復雜，包含很多狀態之間的依賴關系，或者需要執行大量的異步操作，Redux 提供了清晰的結構來管理這些狀態變更。
跨組件通信
如果你有多個不直接相關的組件需要通信（例如，在某個組件中修改了數據，其他組件需要更新），使用 Redux 可以避免復雜的傳遞關系，簡化跨組件通信。
調試和持久化
Redux 的狀態是不可變的，便于調試。你可以通過 Redux DevTools 查看應用狀態的變化過程，還可以方便地在應用崩潰時恢復狀態。

在 React Native 項目中使用 Redux

以下是如何在 React Native 項目中具體使用 Redux 的步驟：

1. 安裝相關依賴

首先，安裝 Redux 和 React-Redux：

npm install redux react-redux

2. 創建 Action 和 Reducer

創建 Action（例如：添加任務）

// actions/todoActions.js
export const addTodo = (text) => ({type: 'ADD_TODO',payload: text,
});

創建 Reducer

// reducers/todoReducer.js
const initialState = {todos: [],
};const todoReducer = (state = initialState, action) => {switch (action.type) {case 'ADD_TODO':return {...state,todos: [...state.todos, action.payload],};default:return state;}
};export default todoReducer;

3. 創建 Store

// store.js
import { createStore } from 'redux';
import todoReducer from './reducers/todoReducer';const store = createStore(todoReducer);export default store;

4. 使用 `Provider` 將 Store 注入到組件樹

// App.js
import React from 'react';
import { Provider } from 'react-redux';
import store from './store';
import TodoApp from './TodoApp';const App = () => {return (<Provider store={store}><TodoApp /></Provider>);
};export default App;

5. 使用 `connect` 從 Redux 中獲取狀態并派發 Action

在組件中，通過 connect 將 Redux 狀態映射到組件的 props 中，并通過 dispatch 派發 Action。

// TodoApp.js
import React from 'react';
import { View, Text, TextInput, Button } from 'react-native';
import { connect } from 'react-redux';
import { addTodo } from './actions/todoActions';const TodoApp = ({ todos, addTodo }) => {const [text, setText] = React.useState('');const handleAddTodo = () => {addTodo(text);setText('');};return (<View><TextInputvalue={text}onChangeText={setText}placeholder="Add a new todo"/><Button title="Add Todo" onPress={handleAddTodo} />{todos.map((todo, index) => (<Text key={index}>{todo}</Text>))}</View>);
};const mapStateToProps = (state) => ({todos: state.todos,
});const mapDispatchToProps = {addTodo,
};export default connect(mapStateToProps, mapDispatchToProps)(TodoApp);

Redux小結

Redux 的核心原理是使用單一的數據源（Store），通過 actions 觸發 state 更新，Reducers 負責如何更新 state，組件通過訂閱 store 來獲取和渲染數據。
什么時候使用 Redux：當你的應用狀態管理變得復雜，多個組件需要共享狀態時，Redux 是一個很好的解決方案。
在 React Native 中的使用：通過安裝 redux 和 react-redux，創建 Store，定義 Actions 和 Reducers，使用 Provider 注入 Store，最后在組件中通過 connect 獲取和修改狀態。

Redux 雖然提供了強大的狀態管理能力，但對于一些簡單的應用，可以選擇其他更輕量的狀態管理方式（比如 React 的 useState 和 useReducer）。

為什么使用 Redux Toolkit？

簡化配置
Redux Toolkit 內置了 configureStore 函數，自動配置了 Redux DevTools 和 Redux 中間件，避免了手動配置的繁瑣過程。
簡化 Reducer 和 Action
使用 createSlice 可以同時定義 Action 和 Reducer，減少了重復的代碼。你不再需要手動編寫 action type 和 action creators。
默認啟用開發工具
Redux Toolkit 默認啟用了 Redux DevTools，方便你調試應用程序中的狀態變化。
增強的 Immutability 檢查
Redux Toolkit 使用了 Immer 庫，允許你直接修改 state，而不需要擔心不小心修改原始對象的問題，避免了不可變性管理的麻煩。

如何在 React Native 中使用 Redux Toolkit？

以下是如何在 React Native 項目中使用 Redux Toolkit 的步驟：

1. 安裝 Redux Toolkit 和 React-Redux

npm install @reduxjs/toolkit react-redux

2. 創建一個 Slice（包含 Actions 和 Reducer）

// features/todos/todoSlice.js
import { createSlice } from '@reduxjs/toolkit';const todoSlice = createSlice({name: 'todos',initialState: [],reducers: {addTodo: (state, action) => {state.push(action.payload);},removeTodo: (state, action) => {return state.filter(todo => todo !== action.payload);}}
});export const { addTodo, removeTodo } = todoSlice.actions;export default todoSlice.reducer;

3. 配置 Store

// store.js
import { configureStore } from '@reduxjs/toolkit';
import todoReducer from './features/todos/todoSlice';const store = configureStore({reducer: {todos: todoReducer}
});export default store;

4. 使用 `Provider` 包裹應用并傳遞 Store

// App.js
import React from 'react';
import { Provider } from 'react-redux';
import store from './store';
import TodoApp from './TodoApp';const App = () => {return (<Provider store={store}><TodoApp /></Provider>);
};export default App;

5. 在組件中使用 Redux 狀態和派發 Actions

// TodoApp.js
import React, { useState } from 'react';
import { View, Text, TextInput, Button } from 'react-native';
import { useDispatch, useSelector } from 'react-redux';
import { addTodo, removeTodo } from './features/todos/todoSlice';const TodoApp = () => {const [text, setText] = useState('');const todos = useSelector(state => state.todos);const dispatch = useDispatch();const handleAddTodo = () => {if (text.trim()) {dispatch(addTodo(text));setText('');}};const handleRemoveTodo = (todo) => {dispatch(removeTodo(todo));};return (<View><TextInputvalue={text}onChangeText={setText}placeholder="Add a new todo"/><Button title="Add Todo" onPress={handleAddTodo} />{todos.map((todo, index) => (<View key={index}><Text>{todo}</Text><Button title="Remove" onPress={() => handleRemoveTodo(todo)} /></View>))}</View>);
};export default TodoApp;