Question

因此，我有一个React应用，其中我正在使用多个API来获取一些数据，而我正尝试开始在其中使用Redux。我已经看过一些redux教程，但是当我开始思考如何将react app转换为react-redux时，我仍然有些困惑。就像如何将我正在使用的（this.setState）转换为redux一样。我知道我必须使用react-thunk来开始在操作中获取此api，但我仍然感到困惑。这是我的代码。

componentDidMount(){

  let url = ``;
  let url2 = ``;



    fetch(url,{
      method: 'GET'
    })
    .then((response)=> response.json())
    .then((responseJson) => {
      const newItems = responseJson.items.map(i => {
        return{
          name: i.name
        };
      })
      const newState = Object.assign({}, this.state, {
        items: newItems
      });

      console.log(newState);
      this.setState(newState);
    })
    .catch((error) => {
      console.log(error)
    });
    fetch(url2,{
      method: 'GET'
    })
    .then((response)=> response.json())
    .then((responseJson) => {
      const newItems = responseJson.item.map(i => {
        return{
          img: i.img.url
        };
      })
      const newarr = [...this.state.items, ...newItems];
      var resObj = newarr.reduce(function(res, obj) {
          for(var key in obj) {
              if (obj.hasOwnProperty(key)) {
                  res[key] = obj[key];
              }
          }
          return res;
      }, {});

      const newState = {
        items: [resObj]
      }

      this.setState(newState);
    })
    .catch((error) => {
      console.log(error)
    });


}

Answer 1

https://redux.js.org/faq/codestructure

Redux起初可能令人生畏

您想知道的第一件事就是不要使用this.setState，至少现在还没有。

这是带有react的redux的结构

为简单起见，您需要了解的只是调度程序，连接，操作和简化程序。

动作：动作是一个普通的对象，代表改变状态的意图。操作是将数据存储到存储中的唯一方法。无论是来自UI事件，网络回调还是其他来源（例如WebSockets）的任何数据最终都需要作为操作进行分发。https://redux.js.org/glossary#action
Reducer：Reducer（也称为reduce函数）是一个接受累加和值并返回新累加的函数。它们用于将值的集合减少到单个值。 https://redux.js.org/glossary#reducer
连接：连接基本上是组件从全局状态接收数据的一种方式。来自状态的输出，输入到您的组件中。
调度程序：调度程序是您用来输入以触摸状态的功能。

在任何要使用this.setState的地方，都想使用与该动作有关的调度（动作描述并定义了调度功能。这是redux-thunk在fetch函数中起作用的地方）。分派调用动作后，动作从服务器提取数据，reduce清除数据并将其发送回全局存储状态，在此状态下使用connect命令进行反应。

尝试将redux与react

1 个答案: