react、react-redux、redux-thunk、react-saga运用

本文主要是介绍react、react-redux、redux-thunk、react-saga运用，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

动机

随着 JavaScript 单页应用开发日趋复杂，JavaScript 需要管理比任何时候都要多的 state （状态）。 这些 state 可能包括服务器响应、缓存数据、本地生成尚未持久化到服务器的数据，也包括 UI 状态，如激活的路由，被选中的标签，是否显示加载动效或者分页器等等。

三大原则

• 单一数据源

整个应用的 state 被储存在一棵 object tree 中，并且这个 object tree 只存在于唯一一个 store 中。

• State 是只读的

唯一改变 state 的方法就是触发 action，action 是一个用于描述已发生事件的普通对象。

• 使用纯函数来执行修改

为了描述 action 如何改变 state tree ，你需要编写 reducers。

运用

下面，笔都运用一个简单的增加、减少的列子来解读 react-redux 神奇之处。

首先 react-cli 安装一个项目，这块步骤，网上很多教程，就不再继续累赘了。

• 安装 redux 状态管理所需要的模块

npm i -D react-redux redux-thunk

这里解释一下，其实不涉及异步的的 state 状态，不需要 redux-thunk 中间件，这里我们选择带上，是因为一个应用项目肯定会涉及到异步请求。下面来跟着一步步的改造 脚手架生成的项目。（代码编辑器里加粗的是我们要改造的代码块）

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
import { Provider } from 'react-redux';
import Store from './store/index'const store = Store();ReactDOM.render(<Provider store={store}><React.StrictMode><App /></React.StrictMode></Provider>,document.getElementById('root')
);

store/index.js

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import reducer from './reducer';const store = () => createStore(reducer, applyMiddleware(thunk));export default store;

reducer.js

const initialState = { count: 0 };
const reducer = (state = initialState, action) => {switch (action.type) {case 'ADD_CONST':return { count: state.count + 1 };case 'MINUS_CONST':return { count: state.count - 1 };default:return state;  }
}export default reducer;

actions.js

export const addConst = () => {return {type: 'ADD_CONST'}
}export const minusConst = () => {return {type: 'MINUS_CONST'}
}

CustomCount.js 组件

bindActionCreators 是 redux 的一个 API，作用是将单个或多个 ActionCreator 转化为 dispatch(action) 的函数集合形式。也可以不用 bindActionCreators，dispatch 也是可以的

react-redux的connect方法 接受4个参数

1. mapStateToProps(state, [ownProps]) 接受完整的redux状态树作为参数，返回对象的所有key都会成为组件的props
2. mapDispatchToProps(dispatch, [ownProps]) 接受redux的dispatch方法作为参数，返回当前组件相关部分的action creator并可以在这里将action creator与props绑定，减少冗余
3. mergeProps(stateProps, dispatchProps, ownProps) 如果指定这个函数，你将分别获得 mapStateToProps、 mapDispatchToProps 返回值以及当前组件的props 作为参数，最终返回你期望的、完整的 props
4. [options] : pure:true, 将为组件添加shouldComponentUpdate()声明周期函数；
5. withRef：false， 若为true，为组件加一个ref值，后续可以使用 getWrappedInstance() 方法来获取该 ref

import React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import * as countActions from '../store/action';class CustomCount extends React.Component {render() {const { count, actions } = this.props;return (<div><span>{count}</span><button onClick={actions.addConst}>+</button><button onClick={actions.minusConst}>-</button></div>)}
}const mapStateToProps = (state) => {return {count: state.count}
}const mapDispatchToProps = (dispatch) => {return {actions: bindActionCreators(countActions, dispatch)// actions: {//   addConst: () => dispatch(countActions.addConst()),//   minusConst: () => dispatch(countActions.minusConst())// }}
}export default connect(mapStateToProps,mapDispatchToProps
)(CustomCount);

react-saga

请移步：https://www.ifrontend.net/2021/07/redux-saga/

微信公众号搜索“前端开发那点事”

这篇关于react、react-redux、redux-thunk、react-saga运用的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---