Building a React Native Cross-platform App with Redux

Introduction

React Native is a popular framework for building cross-platform mobile applications. It allows developers to write code in JavaScript and then compile it into native code for both iOS and Android platforms. Redux is a predictable state container for JavaScript apps, which can be used in conjunction with React Native to manage the application state efficiently. In this blog post, we will explore how to build a React Native cross-platform app using Redux.

Prerequisites

To follow along with this tutorial, you need to have a basic understanding of React Native and Redux. You should also have Node.js and npm (Node Package Manager) installed on your system.

Step 1: Setting Up the Project

Create a new React Native project using the following command in your terminal:
```
npx react-native init MyApp
```
Change into the project directory:
```
cd MyApp
```
Install the necessary dependencies by running the following command:
```
npm install redux react-redux
```

Step 2: Configuring Redux

Create a new directory called src in the root directory of your project:
```
mkdir src
```
Inside the src directory, create two new directories called actions and reducers:
```
mkdir src/actions
mkdir src/reducers
```

In the actions directory, create a file called index.js:

// src/actions/index.js

export const incrementCounter = () => {
  return {
    type: 'INCREMENT_COUNTER',
  };
};

export const decrementCounter = () => {
  return {
    type: 'DECREMENT_COUNTER',
  };
};

In the reducers directory, create a file called index.js:

// src/reducers/index.js

const initialState = {
  counter: 0,
};

export const counterReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'INCREMENT_COUNTER':
      return {
        ...state,
        counter: state.counter + 1,
      };
    case 'DECREMENT_COUNTER':
      return {
        ...state,
        counter: state.counter - 1,
      };
    default:
      return state;
  }
};

In the root directory of your project, create a file called store.js:

// store.js

import { createStore } from 'redux';
import { counterReducer } from './src/reducers';

export const store = createStore(counterReducer);

Open the App.js file and replace its content with the following code:

// App.js

import React from 'react';
import { Provider } from 'react-redux';
import { store } from './store';
import Counter from './src/components/Counter';

export default function App() {
  return (
    <Provider store={store}>
      <Counter />
    </Provider>
  );
}

Step 3: Creating Components

In the src directory, create a new directory called components:
```
mkdir src/components
```

Inside the components directory, create a new file called Counter.js:

// src/components/Counter.js

import React from 'react';
import { View, Text, Button } from 'react-native';
import { connect } from 'react-redux';
import { incrementCounter, decrementCounter } from '../actions';

const Counter = ({ counter, incrementCounter, decrementCounter }) => {
  return (
    <View>
      <Text>Counter: {counter}</Text>
      <Button title="+" onPress={incrementCounter} />
      <Button title="-" onPress={decrementCounter} />
    </View>
  );
};

const mapStateToProps = (state) => {
  return {
    counter: state.counter,
  };
};

export default connect(mapStateToProps, { incrementCounter, decrementCounter })(Counter);

Step 4: Running the App

Run the following command in your terminal to start the development server:
```
npx react-native start
```
In a new terminal window, run the following command to launch the app in the iOS simulator:
```
npx react-native run-ios
```
Alternatively, if you want to launch the app in the Android emulator, run the following command:
```
npx react-native run-android
```

Conclusion

Congratulations! You have successfully built a React Native cross-platform app with Redux. Redux enables you to manage the application state efficiently and provides a predictable way to update and retrieve data across components. By following this tutorial, you have gained a deeper understanding of how to integrate Redux into your React Native projects. Keep exploring and enhancing your React Native skills to build amazing mobile apps!

本文来自极简博客，作者：梦想实践者，转载请注明原文链接：Building a React Native Cross-platform App with Redux