在 React Native 中使用 Redux 管理应用全局状态和状态共享

前言

React Native 是一种基于 React 的框架，用于构建跨平台的原生应用程序。虽然 React Native 可以帮助我们创建高度可重用的组件，但是在构建大型应用程序时，我们需要更好的状态管理工具来管理全局状态和状态共享。Redux 是一种优秀的状态管理工具，它可以帮助我们轻松地管理应用程序的状态。

在本文中，我们将探讨如何在 React Native 中使用 Redux 管理应用程序的全局状态和状态共享。

Redux 概述

Redux 是一个可预测的状态容器，用于 JavaScript 应用程序。它可以帮助我们管理应用程序的状态，使得我们可以轻松地跟踪应用程序的状态变化。Redux 的核心概念是 Store、Action 和 Reducer。

Store

Store 是 Redux 中的状态容器，它存储应用程序的状态。Store 是一个对象，它包含整个应用程序的状态。我们可以使用 createStore 函数来创建一个 Store。

Action

Action 是一个普通的 JavaScript 对象，它描述了应用程序中发生的事件。Action 包含两个属性：type 和 payload。type 属性描述了 Action 的类型，payload 属性描述了 Action 的负载。

Reducer

Reducer 是一个纯函数，它接受一个旧的状态和一个 Action，并返回一个新的状态。Reducer 应该是纯函数，这意味着它不应该修改传入的状态，也不应该有任何副作用。

在 React Native 中使用 Redux

在 React Native 中使用 Redux 需要安装 redux、react-redux 和 redux-thunk 三个包。redux 包是 Redux 的核心库，react-redux 包提供了与 React 组件的连接，redux-thunk 包是 Redux 的中间件，它允许我们编写异步 Action。

创建 Store

我们可以使用 createStore 函数来创建一个 Store。在 React Native 中，我们通常会在 App.js 文件中创建 Store。

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

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

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

在上面的代码中，我们首先导入 createStore、applyMiddleware 和 rootReducer。然后，我们使用 createStore 函数创建一个 Store，rootReducer 是一个 Reducer，它将处理所有的 Action。我们还使用 applyMiddleware 函数将 redux-thunk 中间件添加到 Store 中。最后，我们使用 Provider 组件将 Store 传递给 Main 组件。

创建 Reducer

Reducer 是一个纯函数，它接受一个旧的状态和一个 Action，并返回一个新的状态。在 React Native 中，我们通常会将所有的 Reducer 放在一个 reducers.js 文件中。

import { combineReducers } from 'redux';
import { FETCH_POSTS_REQUEST, FETCH_POSTS_SUCCESS, FETCH_POSTS_FAILURE } from '../actions/types';

const initialState = {
  loading: false,
  posts: [],
  error: '',
};

const postsReducer = (state = initialState, action) => {
  switch (action.type) {
    case FETCH_POSTS_REQUEST:
      return {
        ...state,
        loading: true,
      };
    case FETCH_POSTS_SUCCESS:
      return {
        loading: false,
        posts: action.payload,
        error: '',
      };
    case FETCH_POSTS_FAILURE:
      return {
        loading: false,
        posts: [],
        error: action.payload,
      };
    default:
      return state;
  }
};

export default combineReducers({
  posts: postsReducer,
});

在上面的代码中，我们首先导入 combineReducers 函数和 FETCH_POSTS_REQUEST、FETCH_POSTS_SUCCESS、FETCH_POSTS_FAILURE 三个 Action 的类型。然后，我们定义了一个初始状态 initialState，它包含了 loading、posts 和 error 三个属性。接下来，我们定义了一个 postsReducer，它接受一个旧的状态 state 和一个 Action，根据 Action 的类型返回一个新的状态。最后，我们将 postsReducer 传递给 combineReducers 函数，并将其导出。

创建 Action

Action 是一个普通的 JavaScript 对象，它描述了应用程序中发生的事件。在 React Native 中，我们通常会将所有的 Action 放在一个 actions.js 文件中。

import axios from 'axios';
import { FETCH_POSTS_REQUEST, FETCH_POSTS_SUCCESS, FETCH_POSTS_FAILURE } from './types';

export const fetchPostsRequest = () => {
  return {
    type: FETCH_POSTS_REQUEST,
  };
};

export const fetchPostsSuccess = (posts) => {
  return {
    type: FETCH_POSTS_SUCCESS,
    payload: posts,
  };
};

export const fetchPostsFailure = (error) => {
  return {
    type: FETCH_POSTS_FAILURE,
    payload: error,
  };
};

export const fetchPosts = () => {
  return (dispatch) => {
    dispatch(fetchPostsRequest());
    axios
      .get('https://jsonplaceholder.typicode.com/posts')
      .then((response) => {
        const posts = response.data;
        dispatch(fetchPostsSuccess(posts));
      })
      .catch((error) => {
        const errorMsg = error.message;
        dispatch(fetchPostsFailure(errorMsg));
      });
  };
};

在上面的代码中，我们首先导入 axios 和 FETCH_POSTS_REQUEST、FETCH_POSTS_SUCCESS、FETCH_POSTS_FAILURE 三个 Action 的类型。然后，我们定义了三个 Action：fetchPostsRequest、fetchPostsSuccess 和 fetchPostsFailure。fetchPostsRequest 和 fetchPostsFailure Action 分别返回 FETCH_POSTS_REQUEST 和 FETCH_POSTS_FAILURE 两个 Action 的类型。fetchPostsSuccess Action 返回 FETCH_POSTS_SUCCESS Action 的类型和一个负载，负载是从 API 获取的帖子列表。最后，我们定义了一个异步 Action fetchPosts，它接受 dispatch 函数作为参数，并在获取帖子列表时调用 dispatch 函数。

连接组件

我们可以使用 connect 函数将组件连接到 Store。在 React Native 中，我们通常会将所有的组件放在一个 components 文件夹中。

import React, { useEffect } from 'react';
import { View, Text } from 'react-native';
import { connect } from 'react-redux';
import { fetchPosts } from '../actions/postsActions';

const Posts = ({ loading, posts, error, fetchPosts }) => {
  useEffect(() => {
    fetchPosts();
  }, []);

  return (
    <View>
      {loading ? (
        <Text>Loading...</Text>
      ) : error ? (
        <Text>{error}</Text>
      ) : (
        posts.map((post) => (
          <Text key={post.id}>
            {post.id}. {post.title}
          </Text>
        ))
      )}
    </View>
  );
};

const mapStateToProps = (state) => {
  return {
    loading: state.posts.loading,
    posts: state.posts.posts,
    error: state.posts.error,
  };
};

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

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

在上面的代码中，我们首先导入 React、View、Text 和 connect 函数。然后，我们定义了一个 Posts 组件，它接受 loading、posts、error 和 fetchPosts 四个属性。我们使用 useEffect Hook 和 fetchPosts Action 在组件加载时获取帖子列表。最后，我们使用 mapStateToProps 函数将 store 中的状态映射到组件的属性，使用 mapDispatchToProps 函数将 Action 映射到组件的属性，并使用 connect 函数将组件连接到 Store。

总结

在本文中，我们探讨了如何在 React Native 中使用 Redux 管理应用程序的全局状态和状态共享。我们首先介绍了 Redux 的核心概念：Store、Action 和 Reducer。然后，我们讨论了如何在 React Native 中创建 Store、Reducer 和 Action。最后，我们介绍了如何使用 connect 函数将组件连接到 Store，并映射状态和 Action 到组件的属性。

Redux 是一个非常强大的状态管理工具，它可以帮助我们轻松地管理应用程序的状态。在构建大型应用程序时，使用 Redux 可以使代码更加清晰和易于维护。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/658bdbe2eb4cecbf2d1243c3