使用Redux获取数据

时间:2017-06-19 07:45:22

标签: javascript reactjs react-native redux react-redux

与仅使用常规模式

相比,使用Redux获取数据有什么好处here
<div class="modal fade in" id="data-confirmation-modal" tabindex="-1" role="dialog" aria-labelledby="data-confirmation-modal-label">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
       <form>
              <div class="modal-header">
                <span class="fa fa-exclamation-triangle"></span>
                <h4 class="modal-title" id="data-confirmation-modal-label">Titile</h4>
              </div>
              <div class="modal-body">
                <p>Example</p>
              </div>
              <div class="modal-footer">
                <button id="" type="button" class="btn-confirm">Conform</button>
                  <button type="button" class="btn-cancel" autofocus="" data-dismiss="modal">Avbryt</button>
              </div>
      </form>
            </div>
          </div>
    </div>

是否使异步提取更容易?是否可以更容易地将数据保存在商店中,因此当我重新打开应用程序而不必再次获取时,我可以检索它?

2 个答案:

答案 0 :(得分:1)

实际上这不是一个关于为何从异步操作中获取数据的问题,看来你需要了解Redux库整体带来的优势。

阅读Redux图书馆作者的文章,无论您是否确实需要Redux,或者它带来了什么好处:https://medium.com/@dan_abramov/you-might-not-need-redux-be46360cf367

答案 1 :(得分:0)

使用Redux来获取数据并不一定具有优势,但是了解使用Redux来获取数据时所发生的事情的更多优势。

几乎总是完全相同的流程。

  1. 我们将在屏幕上渲染一个组件。例如您的PostsPostList组件,它们需要从json api获取帖子列表,以便正确显示自己。结果,我将在一个类上定义一个componentDidMount()方法。这就是为什么我将PostList创建为基于类的组件,以确保可以访问生命周期方法的原因。
  2. componentDidMount()生命周期方法中,我们将放置一个动作创建者。因此,只要我们的组件出现在屏幕上,动作创建者就会被自动调用。
  3. 动作创建者将在其中包含一些将使用axios或fetch的代码,但就我而言,我更喜欢axios,以向json api发出API请求。
  4. 发出请求后,api将响应一些数据。取回数据后,
  5. 我们的动作创建者将始终执行返回动作的操作,并且动作对象将在有效负载属性上获取数据。我们将从动作创建者处返回该动作,然后dispatch方法将分派该动作并将其发送给我们应用内的所有不同reducer。我们将有一些经过特殊配置的减速器,它将监视我们给出的任何类型的动作。减速器将看到该动作,从有效负载属性中提取数据。
  6. Reducer将运行并产生一个新的状态对象,并将其发送到应用程序的React端。这将导致我们的应用程序的反应端重新获得我们返回的json api数据。我们可以使用mapStateToProps()来获取json api数据,可以说它是帖子列表。我们将其从全局状态对象中获取并进入我们的组件。

每个步骤都有一些注意事项。

将动作创建者放入componentDidMount()生命周期方法中是一种常见的做法。我们希望通过通常从生命周期方法中调用操作创建者来确保组件本身对所需数据负责。

在其他一些地方,您可以调用操作创建者来获取数据,但是其中涉及此处未提及的其他库。最常见的地方是componentDidMount()生命周期方法。

关于动作创建者,我们通常会确保动作创建者负责提出我们的API请求。在某些情况下,您可能会组合一些外部类或服务,这些类或服务将为我们做实际的请求,但总的来说,它是动作创建者,它将进行api数据的初始获取。在左边进入阶段是Redux-Thunk。

最后,当您获取数据并将其放入组件时,始终使用mapStateToProps函数从redux存储中获取数据并进入组件。