React Native與Redux或MobX的整合

React Native 可以與 Redux 和 MobX 這兩種狀態管理庫進行整合。下面分別介紹如何將它們整合到 React Native 項目中。

1. Redux

安裝

首先，使用 npm 或 yarn 安裝 react-redux 和 redux 庫：

npm install react-redux redux

或

yarn add react-redux redux

配置

在項目中創建一個名為 store.js 的文件，用于配置 Redux store：

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

const store = createStore(rootReducer, applyMiddleware(thunk));

export default store;

在這里，我們使用了 Redux Thunk 中間件來處理異步操作。接下來，我們需要創建一個名為 reducers.js 的文件，用于存放所有的 reducer：

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

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

export default rootReducer;

最后，在 App.js 文件中，使用 Provider 組件將 Redux store 傳遞給應用：

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

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

export default App;

使用

現在，你可以在組件中使用 connect 函數來訪問 Redux store 中的數據：

import React from 'react';
import { connect } from 'react-redux';

const mapStateToProps = (state) => {
  return {
    exampleData: state.example.data,
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    fetchData: () => dispatch(fetchDataAction()),
  };
};

const ExampleComponent = ({ exampleData, fetchData }) => {
  // 使用 exampleData 和 fetchData
};

export default connect(mapStateToProps, mapDispatchToProps)(ExampleComponent);

2. MobX

安裝

首先，使用 npm 或 yarn 安裝 mobx 和 mobx-react：

npm install mobx mobx-react

或

yarn add mobx mobx-react

配置

在項目中創建一個名為 store.js 的文件，用于存放 MobX store：

import { observable, action, makeObservable } from 'mobx';

class Store {
  data = [];

  constructor() {
    makeObservable(this, {
      data: observable,
      fetchData: action,
    });
  }

  fetchData() {
    // 模擬異步請求數據
    setTimeout(() => {
      this.data = [1, 2, 3];
    }, 1000);
  }
}

const store = new Store();

export default store;

接下來，在 App.js 文件中，使用 observer 函數將 MobX store 傳遞給應用：

import React from 'react';
import { Observer } from 'mobx-react';
import store from './store';
import MainComponent from './MainComponent';

const App = () => {
  return (
    <Observer>
      <MainComponent store={store} />
    </Observer>
  );
};

export default App;

使用

現在，你可以在組件中使用 store 來訪問和修改數據：

import React, { useEffect } from 'react';
import { observer } from 'mobx-react';

const ExampleComponent = observer(({ store }) => {
  useEffect(() => {
    store.fetchData();
  }, [store]);

  return (
    <div>
      {store.data.map((item, index) => (
        <div key={index}>{item}</div>
      ))}
    </div>
  );
});

export default ExampleComponent;

這樣，你就成功地將 Redux 或 MobX 整合到了 React Native 項目中。根據項目的需求和團隊的喜好，你可以選擇其中一種狀態管理庫來進行開發。