React-Redux-处理网络数据 _网络

千磨万击还坚劲，任尔东西南北风。这篇文章主要讲述React-Redux-处理网络数据相关的知识，希望能为你提供帮助。
在看怎么获取之前首先博主这里使用了 Egg 搭建了一个后台，??下载??，然后将 Egg 项目启动起来不介绍如何启动不会的自行去学习 Egg，然后启动了之后就可以进行下一步操作了，然后更改我们的前端 React 代码进行发送网络请求拿到数据这里采用 fetch 进行请求。

更改 About.js 如下

import& nbsp; React& nbsp; from& nbsp; & #39; react& #39; ;

class& nbsp; About& nbsp; extends& nbsp; React.PureComponent& nbsp;
& nbsp; & nbsp; & nbsp; & nbsp; componentDidMount()& nbsp;
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; fetch(& #39; http://localhost:7001/info)
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; .then(resp& nbsp; =& gt; & nbsp;
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; return& nbsp; resp.json();
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; )
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; .then(data& nbsp; =& gt; & nbsp;
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; console.log(data);
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; )
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; .catch(error& nbsp; =& gt; & nbsp;
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; console.log(error);
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; );
& nbsp; & nbsp; & nbsp; & nbsp;

& nbsp; & nbsp; & nbsp; & nbsp; render()& nbsp;
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; return& nbsp; (
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & lt; div& gt;
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & lt; /div>
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; )
& nbsp; & nbsp; & nbsp; & nbsp;

export& nbsp; default& nbsp; About;

从如上图中发现数据已经拿到了，然后呐，就开始更改我们的 reducer.js 定义一个状态

// 定义一个状态
let& nbsp; initialState& nbsp; =& nbsp;
& nbsp; & nbsp; & nbsp; & nbsp; count:& nbsp; 666,
& nbsp; & nbsp; & nbsp; & nbsp; info:& nbsp;
;

更改 constants.js 添加一个常量

export& nbsp; const& nbsp; CHANGE_INFO& nbsp; =& nbsp; & #39; CHANGE_INFO& #39; ;

更改 action.js 添加一个 action

import& nbsp;
& nbsp; & nbsp; & nbsp; & nbsp; ...
& nbsp; & nbsp; & nbsp; & nbsp; CHANGE_INFO
& nbsp; from& nbsp; & #39; ./constants& #39; ;

...

export& nbsp; const& nbsp; changeAction& nbsp; =& nbsp; (info)& nbsp; =& gt; & nbsp;
& nbsp; & nbsp; & nbsp; & nbsp; return& nbsp; type:& nbsp; CHANGE_INFO,& nbsp; info:& nbsp; info;
;

在 reducer 当中处理任务

import& nbsp;
& nbsp; & nbsp; & nbsp; & nbsp; ...
& nbsp; & nbsp; & nbsp; & nbsp; CHANGE_INFO
& nbsp; from& nbsp; & #39; ./constants& #39; ;

...

// 利用reducer将store和action串联起来
function& nbsp; reducer(state& nbsp; =& nbsp; initialState,& nbsp; action)& nbsp;
& nbsp; & nbsp; & nbsp; & nbsp; switch& nbsp; (action.type)& nbsp;
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; case& nbsp; ADD_COUNT:
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; return& nbsp; ...state,& nbsp; count:& nbsp; state.count& nbsp; +& nbsp; action.num;
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; case& nbsp; SUB_COUNT:
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; return& nbsp; ...state,& nbsp; count:& nbsp; state.count& nbsp; -& nbsp; action.num;
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; case& nbsp; CHANGE_INFO:
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; return& nbsp; ...state,& nbsp; info:& nbsp; action.info;
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; default:
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; return& nbsp; state;
& nbsp; & nbsp; & nbsp; & nbsp;

export& nbsp; default& nbsp; reducer;

然后在 About.js 当中在获取到网络数据的时候调用派发的方法传递一个数据，然后对应的 action 会保存到对应的状态当中，这样就实现了将网络的数据保存在 Redux 当中了

import& nbsp; React& nbsp; from& nbsp; & #39; react& #39; ;
import& nbsp; changeAction& nbsp; from& nbsp; & quot; ../store/action& quot; ;
import& nbsp; connect& nbsp; from& nbsp; & quot; ../connect/connect& quot; ;

class& nbsp; About& nbsp; extends& nbsp; React.PureComponent& nbsp;
& nbsp; & nbsp; & nbsp; & nbsp; componentDidMount()& nbsp;
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; fetch(& #39; http://localhost:7001/info)
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; .then(resp& nbsp; =& gt; & nbsp;
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; return& nbsp; resp.json();
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; )
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; .then(data& nbsp; =& gt; & nbsp;
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; this.props.changeInfo(data);
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; )
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; .catch(error& nbsp; =& gt; & nbsp;
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; console.log(error);
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; );
& nbsp; & nbsp; & nbsp; & nbsp;

& nbsp; & nbsp; & nbsp; & nbsp; render()& nbsp;
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; return& nbsp; (
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & lt; div& gt;
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & lt; p& gt; this.props.info.name& lt; /p>
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & lt; p& gt; this.props.info.age& lt; /p>
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & lt; /div>
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; )
& nbsp; & nbsp; & nbsp; & nbsp;

const& nbsp; mapStateToProps& nbsp; =& nbsp; (state)& nbsp; =& gt; & nbsp;
& nbsp; & nbsp; & nbsp; & nbsp; return& nbsp;
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; info:& nbsp; state.info
& nbsp; & nbsp; & nbsp; & nbsp;
;
const& nbsp; mapDispatchToProps& nbsp; =& nbsp; (dispatch)& nbsp; =& gt; & nbsp;
& nbsp; & nbsp; & nbsp; & nbsp; return& nbsp;
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; changeInfo(info)& nbsp;
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; dispatch(changeAction(info));
& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;
& nbsp; & nbsp; & nbsp; & nbsp;
;
export& nbsp; default& nbsp; connect(mapStateToProps,& nbsp; mapDispatchToProps)(About);