redux教程（一）——理解redux

最新推荐文章于 2025-07-25 17:17:48 发布

原创最新推荐文章于 2025-07-25 17:17:48 发布 · 5.2k 阅读

21 ·

CC 4.0 BY-SA版权

文章标签：

#redux #基础 #store #reducer

Redux是一种针对复杂数据状态管理问题的解决方案，使页面数据管理更加轻松。本文介绍了Redux的基础概念，包括store、state、Action、reducer等，并探讨了如何学习Redux。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

redux是干什么的

react的页面应用越来越复杂，数据和状态的管理也越来越复杂，甚至夹杂着ajax异步请求对数据状态的变更。不知从什么时候开始——react框架的数据状态的管理已经越来越难以控制和预测！！

redux就是针对难以处理的数据管理，提出的一种解决方案。它能够让你的页面的数据管理更轻松。

为什么要用redux

当问到为什么要使用redux的时候，我觉得有一句话特别经典。

当你不知道为什么要用redux的时候，那就不需要使用redux。。。

至于当你在你的项目中，关于数据管理方面，有你处理不了的情况出现时，这是时候才用redux。。。

redux为什么能够解决复杂数据状态管理的问题

redux认为，基于一个web应用，数据和视图是一一对应的关系！
而我们只需要维护一个公有的store，当这个store变化时，视图才跟着变化。
这是redux解决数据状态管理的核心点！！！！

针对redux，该如何来学习

redux有非常好的官方文档文档地址。

可是大多数初学者读这篇文档，读的很困难！读完还是不会redux！！

之前有react社区的一个小伙这么说过，redux学会很简单，官方文档不细读10遍，就别好意思说读不懂，只是功夫没下到！我听了这样的话，果然，我也会redux了。

我学习的过程中发现，redux的学习是一个系统的过程，你不可能越过基础概念，就能够很快的敲出示例demo。我们大多数人的学习过程一般是——一个循序渐进、逐步迭代的过程，而redux的学习却不是这样，你不看概念，就没法理解示例demo，你不敲示例demo，你就无法完全理解redux的各种基础概念。所以最终发现，redux的最好的学习方式就是，通读一个个的概念，敲出示例demo，再根据示例demo，反过来理解概念，循环往复，总能学的懂！！

redux基础概念

1、store是什么？

store是redux库中的createStore方法，生成的一个对象，这个对象中，存储的就是我们的公有数据。

import { createStore } from  'redux';
const store = createStore(fn);

其中fn就是createStore接受的一个参数，这个参数是一个函数，用来返回store对象存储的数据对象。

2、state
store是一个对象，但是要获取这个对象中的所有储存的数据，需要调用它的方法：store.getState(),而state就是store.getState()得到的数据。

import { createStore } from 'redux';
const store = createStore(fn);
const state = store.getState();

3、Action
redux认为，一个state对应着一个view，state改变，view跟着改变。对于用户而言，接触到的可能就只有view，所以redux需要提供一种用户通过view，来更改state，从而让view发生变化的东西。而这个东西就是Action。

action用来描述的是用户行为，它是一个对象，redux通过dispatch这个action来更改state。至于dispatch是什么，这个后面会说明。

var action = {
    type: 'ADD',
    text: 'value'
}

type是Action定义的类型，是一个必须属性。

4、action Creator
用户的行为那么多，仅仅用对象的方式来表示，显得太麻烦！可以使用一个函数的方式来描述action，就叫action creator。

//action creator
function add(text){
    return {
        type: "ADD",
        text: text
    }
}

5、store.dispatch()
我们定义好了用户的行为，可是这个行为我们要怎么才算触发呢？

在redux中，触发用户行为的方式只有一个store.dispatch(),这也是唯一一种更改数据的方式。

import { createStore } from 'redux';
const store = createStore(fn);

store.dispatch({
  type: 'ADD_TODO',
  payload: 'Learn Redux'
});

这里的dispatch接受一个action，进行触发更改state的命令。

6、reducer
用户进行dispatch了，数据要进行变化，可是这个变化的过程我们没有描述，比如dispatch一个action，我们还是不知道一个数字是加一还是减一，又或者有其他的什么操作，而reducer就是用来定义这种操作的过程的！！

const defaultState = 0;
const reducer = (state = defaultState, action) => {
  switch (action.type) {
    case 'ADD':
      return state + action.payload;
    default: 
      return state;
  }
};