首页手记 Redux入门：初学者指南

Redux入门：初学者指南

标签：

redux

概述

Redux入门介绍了Redux的基础知识，包括核心概念如Store、Action、Reducer和Dispatch，并解释了Redux与React的结合使用方式。文章还详细讲解了如何安装和配置Redux，以及最佳实践和高级概念。

Redux基础知识介绍

Redux是什么

Redux 是一种用于管理应用状态的 JavaScript 库，它主要被用来实现单向数据流的应用程序。Redux 的核心思想是将应用的状态存储在一个单独的 JavaScript 对象中，这个对象被称为 store。通过这种方式，Redux 能够帮助开发者更轻松地管理复杂的状态逻辑，尤其是那些状态需要在多个组件之间共享的情况。

Redux的核心概念

Store：Redux 的核心是 store。store 是应用中所有状态的唯一来源。你可以在 store 中获取当前的状态，并通过 dispatch 方法来更新状态。每个 store 都会有一个唯一的 Redux 函数，用来获取当前的状态，以及 dispatch 方法来更新状态。
Action：Action 是一个普通的 JavaScript 对象，它描述了发生了什么，但并不会描述如何去修改状态。Action 通常包含一个类型（type）字段，用来描述发生了什么类型的动作。此外，还可以包含其他数据（payload），这些数据可以用来处理 action。
Reducer：Reducer 是一个函数，它接受当前状态和一个 action，然后返回一个新的状态。Reducer 通过将当前状态与 action 中的数据相结合来计算新的状态。Reducer 是不可变的，也就是说，它不会直接修改当前的状态，而是返回一个新的状态。
Dispatch：Dispatch 是一个函数，它接收一个 action 对象并将其传递给 store。store 会根据这个 action 更新状态。dispatch 是触发状态变化的一种方式。
Selector：Selector 是一个函数，它从 store 中获取状态并返回一些有用的数据。Selectors 可以用来提取一部分状态，或者对状态进行某些计算，从而得到一些具有特定用途的数据。

使用Selector

Selector 是一个函数，它可以从 store 中提取状态并返回一些有用的数据。Selector 可以用来优化性能，因为它只会在状态发生变化时重新计算。例如：

const getCounter = (state) => {
  return state.counter;
};

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

Redux与React的关系

Redux 可以与任何前端框架结合使用，但与 React 的结合最为广泛。在 React 应用中，Redux 通常用于管理组件间的状态共享和状态更新。Redux 和 React 通过 Provider 和 connect 高阶组件实现通信。Provider 组件用于向 React 应用提供 store，而 connect 可以将组件与 store 关联起来，使其能够访问和更新状态。

安装Redux和配置项目

创建Redux store

安装 Redux 和 React-Redux 依赖库：

npm install redux react-redux

创建 store，例如：

import { createStore } from 'redux';

const initialState = {
  counter: 0
};

// Reducer
function counterReducer(state = initialState, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { counter: state.counter + 1 };
    case 'DECREMENT':
      return { counter: state.counter - 1 };
    default:
      return state;
  }
}

// Create store
const store = createStore(counterReducer);

export default store;

连接Redux和React组件

在 React 应用中，使用 Provider 和 connect 将 Redux store 与组件关联起来：

import React from 'react';
import { Provider, connect } from 'react-redux';
import store from './store';

// 创建一个组件
function Counter({ counter, dispatch }) {
  return (
    <div>
      <p>Counter: {counter}</p>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'DECREMENT' })}>Decrement</button>
    </div>
  );
}

// 配置组件
const mapStateToProps = state => {
  return {
    counter: state.counter
  };
};

const mapDispatchToProps = dispatch => {
  return {
    dispatch
  };
};

const ConnectedCounter = connect(mapStateToProps, mapDispatchToProps)(Counter);

// 在应用中使用 Provider 提供 store
function App() {
  return (
    <Provider store={store}>
      <ConnectedCounter />
    </Provider>
  );
}

export default App;

使用Action和Reducer

创建Action

Action 是一个简单的 JavaScript 对象，描述了发生了什么。它通常包含一个 type 字段和一个可选的 payload 字段。例如：

const incrementAction = {
  type: 'INCREMENT'
};

const decrementAction = {
  type: 'DECREMENT'
};

创建Reducer

Reducer 是一个函数，它接受当前状态和一个 action 对象，然后返回一个新的状态。Reducer 用于计算新的状态，它不会直接修改当前状态。例如：

// Reducer
function counterReducer(state = { counter: 0 }, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { counter: state.counter + 1 };
    case 'DECREMENT':
      return { counter: state.counter - 1 };
    default:
      return state;
  }
}

组合Reducer

当应用变得复杂时，常常会将状态分成多个部分，每个部分有自己的 reducer。为了将这些 reducer 组合起来，可以使用 combineReducers 函数。例如：

import { combineReducers } from 'redux';

// 一个简单的 counter reducer
function counterReducer(state = { counter: 0 }, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { counter: state.counter + 1 };
    case 'DECREMENT':
      return { counter: state.counter - 1 };
    default:
      return state;
  }
}

// 一个简单的 todo reducer
function todoReducer(state = [], action) {
  switch (action.type) {
    case 'ADD_TODO':
      return [...state, action.payload];
    default:
      return state;
  }
}

// 组合 reducer
const rootReducer = combineReducers({
  counter: counterReducer,
  todos: todoReducer
});

const store = createStore(rootReducer);

状态管理与最佳实践

管理应用状态

使用 Redux，可以更轻松地管理应用状态。例如，你可以使用 reducer 来处理状态的更新逻辑，或者使用 middleware 来执行异步操作。

使用Middleware

Middleware 是一个函数，它用于处理 action，并可以在 action 传递到 reducer 之前更改 action。Middleware 可用于实现日志记录、错误处理、异步操作等功能。例如，使用 Redux-thunk 来处理异步操作：

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';

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

// 异步 action creator
const fetchTodos = () => {
  return async (dispatch) => {
    const response = await fetch('https://api.example.com/todos');
    const todos = await response.json();
    dispatch({ type: 'FETCH_TODOS', payload: todos });
  };
};

store.dispatch(fetchTodos());

优化性能

为了提高性能，可以使用 redux-thunk 或者 redux-saga 等库来处理异步操作。此外，为了减少不必要的组件重新渲染，可以使用 React.memo 或 useMemo 高阶组件或 hook 来优化性能。例如：

import React, { memo } from 'react';

const Counter = ({ counter }) => {
  return (
    <div>
      <p>Counter: {counter}</p>
    </div>
  );
};

export default memo(Counter);

高级概念介绍

使用Selector

Selector 是一个函数，它可以从 store 中提取状态并返回一些有用的数据。Selector 可以用来优化性能，因为它只会在状态发生变化时重新计算。例如：

const getCounter = (state) => {
  return state.counter;
};

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

状态的分隔与组合

在大型应用中，可以将状态分成多个部分，每个部分有自己的 reducer。这有助于将复杂的状态逻辑分解成更小的、更可管理的部分。例如：

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

function todoReducer(state = [], action) {
  switch (action.type) {
    case 'ADD_TODO':
      return [...state, action.payload];
    default:
      return state;
  }
}

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

避免常见错误

常见的错误包括直接修改状态、在 reducer 中使用副作用、在 action creator 中使用状态等。这些错误会导致难以调试的问题。为了避免这些问题，应遵循以下最佳实践：

使用纯函数编写 reducer，避免使用副作用。
使用 action creators 创建 action，而不是在组件中直接创建 action。
使用 middleware 处理异步操作，避免在 reducer 中直接处理异步操作。

例如，下面是一个错误的 reducer 示例，它直接修改了状态：

function badReducer(state = { counter: 0 }, action) {
  if (action.type === 'INCREMENT') {
    state.counter += 1;  // 错误：直接修改状态
    return state;
  }
  return state;
}

// 正确的 reducer 示例
function goodReducer(state = { counter: 0 }, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { counter: state.counter + 1 };
    default:
      return state;
  }
}

实战演练

小项目实战

创建一个简单的应用，用于管理用户的购物车。应用会显示用户购物车中的商品列表，并允许用户添加或删除商品。

项目结构

- src
  - components
    - Cart.js
  - store
    - cartReducer.js
  - App.js
  - index.js

Cart.js

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';

const Cart = () => {
  const cart = useSelector(state => state.cart);
  const dispatch = useDispatch();

  const addItem = (item) => {
    dispatch({ type: 'ADD_ITEM', payload: item });
  };

  const removeItem = (item) => {
    dispatch({ type: 'REMOVE_ITEM', payload: item });
  };

  return (
    <div>
      <h1>Cart</h1>
      <ul>
        {cart.map((item, index) => (
          <li key={index}>
            {item.name} ({item.price})
            <button onClick={() => removeItem(item)}>Remove</button>
          </li>
        ))}
      </ul>
      <button onClick={() => addItem({ name: 'Example Item', price: 10 })}>Add Item</button>
    </div>
  );
};

export default Cart;

cartReducer.js

const initialState = {
  cart: []
};

const cartReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'ADD_ITEM':
      return { cart: [...state.cart, action.payload] };
    case 'REMOVE_ITEM':
      return { cart: state.cart.filter(item => item !== action.payload) };
    default:
      return state;
  }
};

export default cartReducer;

App.js

import React from 'react';
import { Provider, useSelector, useDispatch } from 'react-redux';
import store from './store/cartReducer';
import Cart from './components/Cart';

function App() {
  return (
    <Provider store={store}>
      <Cart />
    </Provider>
  );
}

export default App;

测试Redux应用

测试 Redux 应用时，可以使用 redux-mock-store 和 jest 等工具。例如，可以使用 redux-mock-store 来模拟 store，并使用 jest 来编写测试用例。

import React from 'react';
import { render } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
import { Provider } from 'react-redux';
import configureMockStore from 'redux-mock-store';
import Cart from './Cart';

const mockStore = configureMockStore();
const store = mockStore({
  cart: []
});

test('renders correctly', () => {
  const { getByText } = render(
    <Provider store={store}>
      <Cart />
    </Provider>
  );
  expect(getByText('Cart')).toBeInTheDocument();
});

文档与资源推荐

点击查看更多内容

为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

海绵宝宝撒

JAVA开发工程师

手记
篇

粉丝

40

获赞与收藏

124

关注作者，订阅最新文章

相关文章推荐

Joomla别名的初学者指南

Redux入门

Redux 入门

Web前端入门指南三

Web前端入门指南四（终章）

阅读免费教程

后端通用面试教程

41个小节 30273 342

网络编程入门教程

20个小节 12461 235

Pandas 入门教程

25个小节 18362 330

推荐

评论

收藏

共同学习，写下你的评论



感谢您的支持，我会继续努力的～

扫码打赏，你说多少就多少

赞赏金额会直接到老师账户

支付方式

打开微信扫一扫，即可进行扫码打赏哦

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

恭喜你，你的运气太好了，居然抽中了 100个积分！

恭喜你，抽中了价值元的专栏！

太棒了，直接落到你账户里！

积分商城里的罗技鼠标、机械键盘、
Kindle 阅读器、小米平衡车
Apple iPad （10.2英寸）、大额优惠券
在等着你去兑换了噢

作者：

免费赠送

兑换码：1111222211 复制

优惠券可用于购买实战课、体系课
无门槛使用

先去看看，有什么好东西马上兑换我爱学习，选课去


热搜

最近搜索清空

Redux入门：初学者指南

Redux是什么

Redux的核心概念

使用Selector

Redux与React的关系

创建Redux store

连接Redux和React组件

创建Action

创建Reducer

组合Reducer

管理应用状态

使用Middleware

优化性能

使用Selector

状态的分隔与组合

避免常见错误

小项目实战

测试Redux应用

文档与资源推荐

相关文章推荐

阅读免费教程