React Native與React-Redux-Thunk的整合

React Native 是一個用于構建跨平臺移動應用的 JavaScript 框架，而 React-Redux-Thunk 是一個用于管理 Redux store 中的異步操作的中間件。要將 React Native 與 React-Redux-Thunk 整合，你需要遵循以下步驟：

1. 安裝依賴項

首先，確保你已經安裝了 Node.js 和 npm。然后，在項目根目錄下運行以下命令來安裝 React Native CLI、Redux 和 Redux-Thunk：

npm install -g react-native-cli
npm install redux react-redux @reduxjs/toolkit redux-thunk

2. 創建 Redux store

在項目中創建一個名為 store.js 的文件，用于設置 Redux store。在這個文件中，你需要導入 Redux、React-Redux 和 Redux-Thunk，并創建一個 store 實例。例如：

import { configureStore } from '@reduxjs/toolkit';
import rootReducer from './reducers';

const store = configureStore({
  reducer: rootReducer,
});

export default store;

3. 創建 Reducer

在項目中創建一個名為 reducers 的文件夾，并在其中創建一個名為 index.js 的文件。在這個文件中，你需要導入你的 reducers 并使用 combineReducers 函數將它們組合成一個根 reducer。例如：

import { combineReducers } from 'redux';
import exampleReducer from './exampleReducer';

const rootReducer = combineReducers({
  example: exampleReducer,
});

export default rootReducer;

4. 連接 React Native 與 Redux

在你的 React Native 項目中，你需要使用 Provider 組件將 Redux store 傳遞給應用程序。在項目的入口文件（例如 App.js）中，導入 Provider 組件并將其包裹在應用程序的根組件中。例如：

import React from 'react';
import { Provider } from 'react-redux';
import store from './store';
import MainApp from './MainApp';

const App = () => {
  return (
    <Provider store={store}>
      <MainApp />
    </Provider>
  );
};

export default App;

5. 使用 Redux-Thunk 管理異步操作

在你的組件中，你可以使用 useDispatch 和 useSelector 鉤子來分發 Redux-Thunk 動作并獲取 store 中的狀態。例如：

import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { fetchData } from './actions';

const MyComponent = () => {
  const dispatch = useDispatch();
  const data = useSelector((state) => state.example.data);

  useEffect(() => {
    dispatch(fetchData());
  }, [dispatch]);

  return (
    <View>
      {data ? (
        <Text>{JSON.stringify(data)}</Text>
      ) : (
        <Text>Loading...</Text>
      )}
    </View>
  );
};

export default MyComponent;

在這個例子中，我們首先從 actions 文件中導入 fetchData 動作。然后，在組件中使用 useDispatch 鉤子獲取分發函數，并在 useEffect 鉤子中調用它以獲取數據。最后，我們使用 useSelector 鉤子從 store 中獲取數據并在組件中顯示。

現在你已經成功地將 React Native 與 React-Redux-Thunk 整合在一起，并可以使用 Redux-Thunk 管理異步操作了。