如何在ReactNative中使用Redux？

Redux是一种状态管理工具，它与React Native非常搭配，用于管理应用程序的状态并使其易于跟踪和更新。在本文中，我们将介绍如何在React Native中使用Redux。

安装

首先，您需要安装Redux和React Redux。您可以使用以下命令进行安装：

npm install --save redux react-redux

创建存储

在React Native应用程序中，您将需要创建一个存储状态，并将其传递给整个应用程序。您可以使用Redux中的createStore功能来创建存储。

首先，在您的应用程序根目录中创建一个新文件store.js：

import { createStore } from 'redux';
import rootReducer from './reducers';

const store = createStore(rootReducer);

export default store;

在上面的代码中，我们导入Redux中的createStore方法和一个名为rootReducer的reducer函数。

在根reducer中，您可以组合应用程序中的所有reducer。在本示例中，我们只有一个reducer：

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

const rootReducer = combineReducers({
  counter: counterReducer,
});

export default rootReducer;

这个reducer将包装我们的counterReducer以便使用Redux编写的应用程序可以处理更多的状态。

现在，我们有了一个存储和一个根reducer。现在，您需要将我们的存储传递给我们的应用程序。

使用Proveider进行存储操作

在React Native中，您可以使用来包装我们的应用程序并使其可以访问存储。

import React from 'react';
import { StatusBar, View } from 'react-native';
import { Provider } from 'react-redux';
import store from './store';

class App extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <View style={{flex: 1, marginTop: StatusBar.currentHeight}}>
          {/* Your code here */}
        </View>
      </Provider>
    );
  }
}

export default App;

在上面的代码中，我们导入Provider和存储store。我们使用Provider包装我们的应用程序，并将存储传递给它。

创建一个Redux Action

在Redux中，我们使用Action来描述发生了什么。Action必须使用以下格式：

{
  type: STRING,
  payload: ANY
}

• type：字符串，用于描述Action的类型。
• payload：任何数据类型，用于保存其他数据。

我们可以创建一个名为increment的Action来描述计数器递增：

function increment() {
  return {
    type: 'INCREMENT',
  }
}

在上面的代码中，我们创建了一个名为increment的函数，它创建并返回一个Action对象。我们可以使用store.dispatch（）方法来调度此Action。

创建Redux Reducer

Reducer是Redux的核心。它是一个纯函数，用于接收Action和当前状态，并返回新状态。Reducer必须接受两个参数：当前状态和要执行的Action。

在本示例中，我们将创建一个名为counterReducer的Reducer，它将处理Counter组件中的所有Action。

export function counterReducer(state = { count: 0 }, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    default:
      return state;
  }
}

在上面的代码中，我们导出了一个纯函数counterReducer。它有两个参数，当前状态和Action。我们使用switch语句来检查Action类型并根据需要更新状态。

现在，我们完成了Action和Reducer的设置。接下来，我们需要将它们与React组件结合使用。

在React组件中使用存储

要在React中使用Redux，我们需要将store传递给React组件。使用React Redux中的connect方法来连接组件并将store的状态传递给它。

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

class Counter extends React.Component {
  render() {
    return (
      <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
        <Text>{this.props.count}</Text>
        <Button title="Increment" onPress={this.props.increment} />
      </View>
    );
  }
}

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

const mapDispatchToProps = dispatch => ({
  increment: () => dispatch(increment()),
});

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

在上面的代码中，我们使用连接函数connect将Counter组件连接到Redux存储。我们使用mapStateToProps来映射存储上的状态，并使用mapDispatchToProps来设置我们的increment Action。

完结

现在，您已经了解了如何在React Native中使用Redux。使用Redux，您可以轻松管理React Native应用程序中的状态。