React-Redux 5.x 快速入门指南-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00597/article/details/148361812

React-Redux 5.x 快速入门指南

react-redux reduxjs/react-redux: React-Redux 是一个用于 React 的 Redux 绑定库，可以用于构建 React 应用程序和组件，支持多种 Redux 功能和工具，如 Redux，Redux-Thunk，Redux-DevTools 等。项目地址: https://gitcode.com/gh_mirrors/re/react-redux

什么是 React-Redux？

React-Redux 是 Redux 官方提供的 React 绑定库，它充当了 React 组件与 Redux 状态管理之间的桥梁。通过 React-Redux，你的组件可以轻松地访问 Redux store 中的状态，并能够派发 action 来更新 store 中的数据。

核心概念

在 React-Redux 中有两个核心概念需要理解：

Provider 组件：这是一个高阶组件，它使得 Redux store 能够在整个 React 应用中被访问
connect 方法：用于将 React 组件连接到 Redux store

安装步骤

要在你的 React 项目中使用 React-Redux，首先需要安装它：

使用 npm：

npm install --save react-redux

或者使用 yarn：

yarn add react-redux

基本使用流程

1. 设置 Provider

首先，你需要在应用的顶层组件中包裹 Provider 组件，并将 Redux store 作为 prop 传递给它：

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

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

Provider 使用了 React 的 Context 特性，使得 store 可以被所有子组件访问。

2. 连接组件

接下来，使用 connect 方法将你的组件连接到 Redux store。connect 是一个高阶函数，它接收两个可选参数：

mapStateToProps：定义如何将 store 中的状态映射到组件的 props
mapDispatchToProps：定义如何将 action creators 映射到组件的 props

基本使用方式如下：

import { connect } from 'react-redux';
import { increment, decrement, reset } from './actionCreators';

function Counter({ counter, increment, decrement, reset }) {
  // 组件实现
}

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

const mapDispatchToProps = {
  increment,
  decrement,
  reset
};

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

深入理解 connect 方法

mapStateToProps

这个函数接收 Redux store 的当前 state 作为第一个参数，返回一个对象，这个对象的属性将成为连接组件的 props。

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

mapDispatchToProps

这个参数可以是对象或函数。当使用对象简写形式时，每个 action creator 都会被自动包装成 dispatch 调用。

// 对象简写形式
const mapDispatchToProps = {
  increment,
  decrement
};

// 等价于函数形式
const mapDispatchToProps = (dispatch) => {
  return {
    increment: () => dispatch(increment()),
    decrement: () => dispatch(decrement())
  };
};