React Redux 教程

欢迎来到我们的 React Redux 教程！在这个教程中，我们将深入探讨 React 和 Redux 的结合使用，帮助你更好地理解并运用这个强大的前端开发工具。

简介

Redux 是一个用于管理应用状态的工具，而 React 是一个用于构建用户界面的库。将它们结合起来，可以创建出既灵活又可预测的前端应用。

安装

首先，你需要确保你的开发环境中已经安装了 Node.js 和 npm。然后，创建一个新的 React 应用：

npx create-react-app my-redux-app
cd my-redux-app

接下来，安装 Redux 和 React-Redux：

npm install redux react-redux

基础概念

Action

Action 是一个描述发生了什么的普通对象。它是 Redux 的消息，用来描述应用中发生的事件。

const ADD_TODO = 'ADD_TODO';

const addTodo = text => ({
  type: ADD_TODO,
  text
});

Reducer

Reducer 是一个纯函数，它接收当前状态和一个 action，然后返回新的状态。

const todos = (state = [], action) => {
  switch (action.type) {
    case ADD_TODO:
      return [...state, action.text];
    default:
      return state;
  }
};

Store

Store 是一个对象，它包含了整个应用的状态，并且提供了读取和修改状态的方法。

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

const store = createStore(todos);

使用 React-Redux

React-Redux 提供了两个重要的组件：Provider 和 connect。

Provider

Provider 组件允许你在 React 组件树中传递 Redux store。

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

const rootElement = document.getElementById('root');
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  rootElement
);

Connect

connect 是一个高阶组件，它将 React 组件和 Redux store 连接起来。

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

const TodoList = ({ todos }) => (
  <ul>
    {todos.map(todo => (
      <li key={todo}>{todo}</li>
    ))}
  </ul>
);

const mapStateToProps = state => ({
  todos: state.todos
});

export default connect(mapStateToProps)(TodoList);

扩展阅读

想要了解更多关于 React Redux 的知识？请阅读以下文章：

• React Redux 官方文档

图片