2）react-redux抽离redux

为什么用react-redux？

redux与react组件的代码耦合度太高

编码不够简洁

基本概念

React-Redux将所有组件分成两大类

UI组件

a.只负责 UI 的呈现，不带有任何业务逻辑

b.通过props接收数据(一般数据和函数)

c.不使用任何 Redux 的 API

d.一般保存在components文件夹下

容器组件

a.负责管理数据和业务逻辑，不负责UI的呈现

b.使用 Redux 的 API

c.一般保存在containers文件夹下

相关API

1.Provider

让所有组件都可以得到state数据

<Provider store={store}>
    <App />
  </Provider>

2.connect()

用于包装 UI 组件生成容器组件

import { connect } from 'react-redux'
  connect(
    mapStateToprops,
    mapDispatchToProps
  )(Counter)

3.mapStateToprops()

将外部的数据（即state对象）转换为UI组件的标签属性
  const mapStateToprops = function (state) {
   return {
     value: state
   }
  }

4.mapDispatchToProps()

将分发action的函数转换为UI组件的标签属性

简洁语法可以直接指定为actions对象或包含多个action方法的对象

下载包 npm install --save react-redux

优化redux：根据 React-Redux组件分类思想，将app.jsx从上一篇的redux内抽离出来

// app.jsx
import { connect } from "react-redux";
// 引入action内的方法
import { increment, decrement } from "../redux/actions";
// 引入容器组件
import counter from "../components/counter";export default connect((state) => {// state为store内的count值 即0console.log(state, "state");// 将state状态传给counter组件return { count: state };},// 将increment,decrement方法传给counter{ increment, decrement }
)(counter);

// counter.js内
// 导入 React 模块
import React, { Component } from "react";import propTypes from "prop-types";// 暴露并创建react类
export default class App extends Component {static propTypes = {count: propTypes.number.isRequired,increment: propTypes.func.isRequired,decrement: propTypes.func.isRequired,};addCountFn = () => {this.props.increment(this.select.value * 1);};delCountFn = () => {this.props.decrement(this.select.value * 1);};incrementOddFn = () => {const { count } = this.props;if (count % 2 === 1) {this.props.increment(this.select.value * 1);}};incrementAsyncFn = () => {setTimeout(() => {this.props.increment(this.select.value * 1);}, 1000);};render() {const { count } = this.props;return (<div><h2>click {count} times</h2><select ref={(select) => (this.select = select)}><option value="1">1</option><option value="2">2</option><option value="3">3</option></select>&nbsp;<button onClick={this.addCountFn}>+</button>&nbsp;<button onClick={this.delCountFn}>-</button>&nbsp;<button onClick={this.incrementOddFn}>increment if odd</button>&nbsp;<button onClick={this.incrementAsyncFn}>increment async</button></div>);}
}

// index.js
import React from "react";
import { createRoot } from 'react-dom/client';
import { Provider } from "react-redux";import store from './redux/store'
import App from "./containers/app";createRoot(document.getElementById('root')).render(<Provider store={store} ><App /></Provider>
);;

上一篇问题：reducers.js如何暴露多个模块

// reducers.js
import { COMMENT_ADD, COMMENT_DEL, COMMENT_INIT, INCREMENT, DECREMENT } from "./action-types";
import { combineReducers } from 'redux'
const initCommentData = []function comments (state = initCommentData, actions) {switch (actions.type) {// 添加方法case COMMENT_ADD:return [actions.data, ...state]// 删除方法case COMMENT_DEL:return state.filter((comment, index) => index !== actions.data)// 初始化评论case COMMENT_INIT:return actions.data// 默认default:return state}
}function counter (state = 0, action) {switch (action.type) {case INCREMENT:return state += action.datacase DECREMENT:return state -= action.datadefault:return state}
}export default combineReducers({comments,counter}
)

暴露多个模块后,相应的组件也要做修改

// app.jsx
import React, { Component } from "react";
import { connect } from "react-redux";
import PropTypes from "prop-types";import Add from "../../components/commentAdd/commentAdd";
import List from "../../components/commentList/commentList";
import { commentAdd, commentDel, commentAsync } from "../../redux/actions";
import "./app.css";class App extends Component {static propTypes = {commentList: PropTypes.array.isRequired,commentAdd: PropTypes.func.isRequired,commentDel: PropTypes.func.isRequired,commentAsync: PropTypes.func.isRequired,};componentDidMount() {const { commentAsync } = this.props;commentAsync();}render() {const { commentList, commentAdd, commentDel } = this.props;return (<div id="app"><div><header className="site-header jumbotron"><div className="container"><div className="row"><div className="col-xs-12"><h1>请发表对React的评论</h1></div></div></div></header><div className="container"><Add commentAdd={commentAdd} /><List commentList={commentList} commentDel={commentDel} /></div></div></div>);}
}export default connect((state) =>
// 此处为reducers修改后调整
({ commentList: state.comments }),
{commentAdd,commentDel,commentAsync
}
)(App);

// store.js 存储 状态变量import { configureStore } from '@reduxjs/toolkit'import reducers from './reducers'// 根据comments函数创建store对象const store = configureStore({ reducer: reducers })
console.log(store, 'store');
export default store

redux如何处理异步操作？？？

redux-thunk处理异步操作_FF_XM的博客-CSDN博客

redux基本概念

redux初体验（问题记录）_FF_XM的博客-CSDN博客

2）react-redux抽离redux相关推荐

react dispatch_梳理下redux、mobx 在react的应用
❝ 本文整理下近期 redux.mobx 在 react 中的使用对比,大家可以根据个人喜好,合理使用查看完整 demo ❞ redux 状态管理 redux 基本使用流程 ❝ 首先把 redux ...
React native 项目进阶(redux, redux saga, redux logger)
之前利用知乎日报的api写了react-native的一个入门项目,传送文章地址React Native 项目入门和源码地址RN入门项目源码,目前github上的代码已经在原文的基础上增加了新的功能, ...
【React.js 06】Redux基础知识
Redux是一个专注于状态管理的库,和React是解耦的,用Angular和Vue都可以使用Redux.其具有一个单一状态,单向数据流的特性. Redux概念 redux有一个store,记录所有的s ...
优雅的在React项目中使用Redux
概念首先我们会用到哪些框架和工具呢? React UI框架 Redux 状态管理工具,与React没有任何关系,其他UI框架也可以使用Redux react-redux React插件,作用:方便在 ...
如何优雅地在React项目中使用Redux
前言或许你当前的项目还没有到应用Redux的程度,但提前了解一下也没有坏处,本文不会安利大家使用Redux 概念首先我们会用到哪些框架和工具呢? React UI框架 Redux 状态管理工具,与 ...
如何在React Native中使用Redux Saga监视网络更改
by Pritish Vaidya 通过Pritish Vaidya 如何在React Native中使用Redux Saga监视网络更改 (How to monitor network change ...
【转】浅谈React、Flux 与 Redux
本文转自<浅谈React.Flux 与 Redux>,转载请注明出处. React React 是一个 View 层的框架,用来渲染视图,它主要做几件事情: 组件化利用 props 形成 ...
React技术栈探究-Redux
React技术栈耕耘 -- Redux Redux 是近年来提出的 Flux 思想的一种实践方案,在它之前也有 reflux . fluxxor 等高质量的作品,但短短几个月就在 GitHub 上获近 ...
彻底征服 React.js ＋ Flux + Redux【讲师辅导】-曾亮-专题视频课程
彻底征服 React.js + Flux + Redux[讲师辅导]-74574人已学习课程介绍 [会员免费]链接 http://edu.csdn.net/lecturer/585 ...

2）react-redux抽离redux

基本概念

React-Redux将所有组件分成两大类

UI组件

容器组件

相关API

2）react-redux抽离redux相关推荐

最新文章

热门文章