Redux 调试技巧及其应用实例

介绍

Redux 是一个流行的 JavaScript 应用程序状态管理库，它与 React 一起被广泛使用。Redux 可以让你更轻松地管理应用程序的状态，从而方便了代码复用和测试。本文将介绍 Redux 的调试技巧以及一些应用实例，帮助你更好地了解 Redux 并在开发中更好地使用它。

调试技巧

使用 Redux DevTools 拓展

Redux DevTools 是一个 Chrome/Firefox 拓展工具，可以帮助你更轻松地调试 Redux 应用程序。安装完成后，在控制台中打开 Redux DevTools 选项卡，你将能够查看当前的应用程序状态、在时间旅行时穿越状态历史，甚至可以更改应用程序状态。

示例代码：

// www.javascriptcn.com code example
import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

const middleware = [thunk];

const store = createStore(
  rootReducer,
  composeWithDevTools(
    applyMiddleware(...middleware)
  )
);

export default store;

在代码中执行一个断言

断言是一种用于验证代码是否按预期执行的强大工具。在 Redux 应用程序中，可以使用 console.assert() 函数作为断言来检查应用程序状态。例如，我们可以在 reducer 函数中添加以下代码，确保 Redux 应用程序状态的类型正确。

示例代码：

// www.javascriptcn.com code example
function counter(state = 0, action) {
  switch (action.type) {
    case 'INCREMENT':
      console.assert(typeof action.payload === 'number', `Expected a number but got ${typeof action.payload}`);
      return state + action.payload;
    case 'DECREMENT':
      console.assert(typeof action.payload === 'number', `Expected a number but got ${typeof action.payload}`);
      return state - action.payload;
    default:
      return state;
  }
}

在控制台中进行代码性能分析

Redux 应用程序的性能非常重要，特别是在大型应用程序中。你可以使用控制台的性能分析工具来检查应用程序的性能，并查找解决性能瓶颈的方法。例如，使用 console.time() 函数可以帮助你测量代码执行时间，console.profile() 函数可以帮助你记录整个代码执行过程的性能数据，并在控制台中查看更详细的信息。

示例代码：

// www.javascriptcn.com code example
function counter(state = 0, action) {
  console.time('counter');
  switch (action.type) {
    case 'INCREMENT':
      console.assert(typeof action.payload === 'number', `Expected a number but got ${typeof action.payload}`);
      const result = state + action.payload;
      console.profile('increment');
      console.timeEnd('counter');
      return result;
    case 'DECREMENT':
      console.assert(typeof action.payload === 'number', `Expected a number but got ${typeof action.payload}`);
      const result2 = state - action.payload;
      console.profile('decrement');
      console.timeEnd('counter');
      return result2;
    default:
      return state;
  }
}

应用实例

电影列表应用程序

我们将创建一个简单的电影列表应用程序，使用 Redux 状态管理库来管理电影列表的状态。在这个应用程序中，你可以添加新电影、删除电影，并在电影评论上进行喜欢和点赞。

首先，我们将创建一个状态树对象，用来存储电影列表：

// www.javascriptcn.com code example
{
  movies: [
    {
      id: 1,
      title: 'The Shawshank Redemption',
      year: 1994,
      image: 'https://upload.wikimedia.org/wikipedia/en/8/81/ShawshankRedemptionMoviePoster.jpg',
      comments: [
        {
          id: 1,
          text: 'One of my favorites!',
          liked: true,
          disliked: false,
        },
        {
          id: 2,
          text: 'Such a well-made film',
          liked: false,
          disliked: false,
        },
      ],
    },
    {
      id: 2,
      title: 'The Godfather',
      year: 1972,
      image: 'https://upload.wikimedia.org/wikipedia/en/1/1c/Godfather_ver1.jpg',
      comments: [],
    },
  ]
}

然后，我们将创建以下 action 创建函数来更新电影列表的状态：

// www.javascriptcn.com code example
export const addMovie = (title, year, image) => ({
  type: 'ADD_MOVIE',
  payload: { title, year, image },
});

export const removeMovie = (id) => ({
  type: 'REMOVE_MOVIE',
  payload: { id },
});

export const likeComment = (movieId, commentId) => ({
  type: 'LIKE_COMMENT',
  payload: { movieId, commentId },
});

export const dislikeComment = (movieId, commentId) => ({
  type: 'DISLIKE_COMMENT',
  payload: { movieId, commentId },
});

接下来，我们可以编写 reducer 函数来处理这些 action：

// www.javascriptcn.com code example
const initialState = {
  movies: [],
};

function movieReducer(state = initialState, action) {
  switch (action.type) {
    case 'ADD_MOVIE':
      const newMovie = {
        id: state.movies.length + 1,
        ...action.payload,
        comments: [],
      };
      return {
        ...state,
        movies: state.movies.concat(newMovie),
      };
    case 'REMOVE_MOVIE':
      return {
        ...state,
        movies: state.movies.filter((movie) => movie.id !== action.payload.id),
      };
    case 'LIKE_COMMENT':
      const updatedMoviesWithLikedComment = state.movies.map((movie) => {
        if (movie.id === action.payload.movieId) {
          const updatedComments = movie.comments.map((comment) => {
            if (comment.id === action.payload.commentId) {
              comment.liked = true;
            }
            return comment;
          });
          return {
            ...movie,
            comments: updatedComments,
          };
        }
        return movie;
      });
      return {
        ...state,
        movies: updatedMoviesWithLikedComment,
      };
    case 'DISLIKE_COMMENT':
      const updatedMoviesWithDislikedComment = state.movies.map((movie) => {
        if (movie.id === action.payload.movieId) {
          const updatedComments = movie.comments.map((comment) => {
            if (comment.id === action.payload.commentId) {
              comment.disliked = true;
            }
            return comment;
          });
          return {
            ...movie,
            comments: updatedComments,
          };
        }
        return movie;
      });
      return {
        ...state,
        movies: updatedMoviesWithDislikedComment,
      };
    default:
      return state;
  }
}

最后，我们将使用 Redux 的 bindActionCreators 辅助函数来将 action 放入一个单独的对象中，这样更轻松实现在组件中调用 action：

// www.javascriptcn.com code example
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import * as movieActions from '../actions/movies'; // Import all action creators

class MovieList extends React.Component {
  // ...
}

// Map state to props
const mapStateToProps = (state) => ({
  movies: state.movies,
});

// Map dispatch to props
const mapDispatchToProps = (dispatch) =>
  bindActionCreators(movieActions, dispatch);

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

结论

Redux 是一个值得学习的状态管理库，它可以帮助我们更轻松地管理我们的应用程序状态，并使代码复用和测试更加简单。在本文中，我们学习了几个 Redux 的调试技巧，并实现了一个简单的电影列表应用程序。我希望这篇文章能够帮助你更好地了解 Redux，并在你的下一个项目中更好地使用它。

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/674a04e8a1ce0063547b2b97