React Native 开发实战之 Redux-JavaScript中文网-JavaScript教程资源分享门户

React Native 是一种基于 React 的开源框架，可以让开发者使用 JavaScript 和 React 编写原生移动应用。在 React Native 中，Redux 是一种非常流行的状态管理工具，可以帮助开发者更好地管理应用程序的状态。本文将介绍 Redux 的基本概念、使用方法以及实战示例。

Redux 的基本概念

Redux 是一个状态管理工具，它的核心是 Store、Action 和 Reducer。其中，Store 是应用程序中所有状态的唯一来源，Action 是一个包含描述应用程序中某个事件的数据的对象，而 Reducer 是一个负责更新应用程序状态的函数。

Redux 的基本工作流程如下：

应用程序的状态存储在一个 Store 中。
当用户执行某个操作时，应用程序会创建一个 Action 对象来描述该操作。
Redux 会将该 Action 对象发送到所有注册的 Reducer 中。
Reducer 根据 Action 类型更新应用程序状态。
Store 发布更新后的状态，使所有订阅 Store 的组件都能够获取到最新的状态。

Redux 的使用方法

Redux 的使用方法包括三个部分：创建 Store、创建 Action 和创建 Reducer。

创建 Store

在 Redux 中，Store 是应用程序中所有状态的唯一来源。创建 Store 的代码如下：

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

const store = createStore(rootReducer);

其中，createStore 是 Redux 提供的一个函数，用于创建 Store。rootReducer 是一个负责更新应用程序状态的函数，它是由多个 Reducer 组合而成的。

创建 Action

在 Redux 中，Action 是一个包含描述应用程序中某个事件的数据的对象。创建 Action 的代码如下：

export const ADD_TODO = 'ADD_TODO';

export function addTodo(text) {
  return { type: ADD_TODO, text };
}

其中，ADD_TODO 是 Action 的类型，addTodo 是一个返回包含 type 和 text 属性的 Action 对象的函数。

创建 Reducer

在 Redux 中，Reducer 是一个负责更新应用程序状态的函数。创建 Reducer 的代码如下：

// javascriptcn.com 代码示例
import { ADD_TODO } from '../actions';

const initialState = {
  todos: []
};

export default function rootReducer(state = initialState, action) {
  switch (action.type) {
    case ADD_TODO:
      return Object.assign({}, state, {
        todos: [
          ...state.todos,
          {
            text: action.text,
            completed: false
          }
        ]
      });
    default:
      return state;
  }
}

其中，initialState 是 Store 中的默认状态，rootReducer 是一个负责更新应用程序状态的函数。在 Reducer 中，我们可以根据 Action 的类型更新应用程序状态。

Redux 的实战示例

下面我们将通过一个简单的 TodoList 应用程序来演示如何使用 Redux。

创建 TodoList 应用程序

首先，我们需要创建一个基本的 TodoList 应用程序。创建 TodoList 应用程序的代码如下：

// javascriptcn.com 代码示例
import React, { Component } from 'react';
import { View, Text, TextInput, Button } from 'react-native';

export default class TodoList extends Component {
  constructor(props) {
    super(props);

    this.state = {
      todos: [],
      newTodo: ''
    };
  }

  addTodo() {
    const { todos, newTodo } = this.state;

    this.setState({
      todos: [
        ...todos,
        {
          text: newTodo,
          completed: false
        }
      ],
      newTodo: ''
    });
  }

  render() {
    const { todos, newTodo } = this.state;

    return (
      <View>
        <TextInput
          value={newTodo}
          onChangeText={text => this.setState({ newTodo: text })}
        />
        <Button title="Add Todo" onPress={() => this.addTodo()} />
        <Text>Todos:</Text>
        {todos.map((todo, index) => (
          <Text key={index}>{todo.text}</Text>
        ))}
      </View>
    );
  }
}

在上面的代码中，我们创建了一个基本的 TodoList 应用程序。该应用程序包含一个输入框和一个按钮，用户可以在输入框中输入新的 Todo，然后点击按钮添加到 TodoList 中。同时，该应用程序还会显示当前 TodoList 中的所有 Todo。

使用 Redux 管理状态

接下来，我们将使用 Redux 管理 TodoList 应用程序的状态。首先，我们需要安装 Redux 和 React-Redux：

npm install --save redux react-redux

然后，我们需要创建一个 Store 和一个 Reducer：

// javascriptcn.com 代码示例
import { createStore } from 'redux';

const initialState = {
  todos: []
};

function rootReducer(state = initialState, action) {
  switch (action.type) {
    case 'ADD_TODO':
      return Object.assign({}, state, {
        todos: [
          ...state.todos,
          {
            text: action.text,
            completed: false
          }
        ]
      });
    default:
      return state;
  }
}

const store = createStore(rootReducer);

export default store;

在上面的代码中，我们创建了一个 Store 和一个 Reducer。Store 中的默认状态包含了一个空的 TodoList。Reducer 根据 ADD_TODO Action 的类型更新应用程序状态。

接下来，我们需要将 Store 和应用程序连接起来：

// javascriptcn.com 代码示例
import React, { Component } from 'react';
import { View, Text, TextInput, Button } from 'react-native';
import { Provider } from 'react-redux';
import store from './store';

export default class TodoList extends Component {
  constructor(props) {
    super(props);

    this.state = {
      newTodo: ''
    };
  }

  addTodo() {
    const { newTodo } = this.state;

    store.dispatch({ type: 'ADD_TODO', text: newTodo });

    this.setState({
      newTodo: ''
    });
  }

  render() {
    const { todos } = store.getState();
    const { newTodo } = this.state;

    return (
      <Provider store={store}>
        <View>
          <TextInput
            value={newTodo}
            onChangeText={text => this.setState({ newTodo: text })}
          />
          <Button title="Add Todo" onPress={() => this.addTodo()} />
          <Text>Todos:</Text>
          {todos.map((todo, index) => (
            <Text key={index}>{todo.text}</Text>
          ))}
        </View>
      </Provider>
    );
  }
}

在上面的代码中，我们使用 Provider 组件将 Store 和应用程序连接起来。在 addTodo 函数中，我们调用 store.dispatch 方法来发送 ADD_TODO Action 到 Reducer 中。在 render 函数中，我们通过 store.getState 方法获取当前的应用程序状态，并根据状态来渲染 TodoList。

至此，我们已经成功地使用 Redux 管理了 TodoList 应用程序的状态。

总结

本文介绍了 Redux 的基本概念、使用方法以及实战示例。Redux 是一个非常流行的状态管理工具，可以帮助开发者更好地管理应用程序的状态。通过本文的学习，相信读者已经掌握了 Redux 的基本用法，并可以在实际项目中灵活运用。

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