Web前端开发|Redux如何实现组合计数器？_惠州前端培训学校

作者：alu发布时间：2022-03-20分类：前端开发专业浏览：625

导读：Redux如何实现组合计数器？这是大家在学习前端的过程都会遇到的问题，那么下面我们一起来看看惠州北大青鸟学术部老师是怎么解答的。

Redux如何实现组合计数器？这是大家在学习前端的过程都会遇到的问题，那么下面我们一起来看看惠州北大青鸟学术部老师是怎么解答的。

Redux实现组合计数器

Redux是一种解决数据共享的方案

import {createStore} from 'redux'; import React from 'react'; import ReactDOM from 'react-dom'; import {connect, createProvider} from 'react-redux' // data let allNum = {num :1000} // 创建reducer, 名字的默认值为 function reducer(state, action) { let tmp = {} if (action.type == "decrease"){ allNum.num = allNum.num - action.value; tmp = Object.assign({}, state, {num: allNum.num}) return tmp }else if(action.type == "increase"){ allNum.num = allNum.num + action.value; tmp = Object.assign({}, state, {num: allNum.num}) return tmp }else{ return state } } // 创建store存储数据(传入处理函数reducer, 核心数据allNum) let store = createStore(reducer, allNum) console.log("初始化的数据为",store.getState('num')) // 添加监听函数 store.subscribe(() => {console.log("监听函数发出:", store.getState())}); // 发出action let tmp = {}; tmp = store.dispatch({type: "decrease", value: 10}) console.log("---->", tmp); tmp = store.dispatch({type: "decrease", value: 100}) console.log("---->", tmp); tmp = store.dispatch({type: "increase", value: 31}) console.log("---->", tmp); tmp = store.dispatch({type: "increase", value: 123}) console.log("---->", tmp); class MyComponent extends React.Component { render() {return <div>Hello World</div>;} } ReactDOM.render(<MyComponent />, document.getElementById("root"));

React和Redux组合使用

React组件, 有两个数据集, props和state

props表示外部传入组件的参数(数据由外部传入, 可以被外部更改)

state表示组件固有的属性(数据私有, 不可以被外部更改)

我们可以把多个React组件的props交由Redux进行管理, 这样就实现了React组件之间数据的共享

webå¼åä¸Reduxå®ç°ç»åè®¡æ°å¨

组件如何读写数据

组件通过action发送信号, reducer处理action, story内的值被reducer修改, 由于React组件已经被绑定到story中, 所以story内的数据被修改后, 可以直接同步到React的组件中

webå¼åä¸Reduxå®ç°ç»åè®¡æ°å¨

小案例: 实现一个组合计数器

单个计数器的数据由组件自身state管理

三个计数器的数据只和由Redux管理

动图演示

实现的源码如下

index.html

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>react-webpack-demo</title> </head> <body> <div id="root"></div> </body> </html>

index.js

import 'babel-polyfill'; import React from 'react'; import ReactDOM from 'react-dom'; import './index.scss'; import Redux from 'redux'; import { connect, Provider } from 'react-redux'; import { createStore } from 'redux'; import { PropTypes } from 'prop-types'; class ManageCounter extends React.Component { constructor(props) { super(props); } render() { return ( <div> <p className="title">计数器</p> <Counter id = "0" /> <Counter id = "1" /> <Counter id = "2" /> <p className="result"> 组件值的和为: { this.props.sum } </p> </div> ) } } class Counter extends React.Component { constructor(props) { super(props); this.changeSum = this.changeSum.bind(this) this.decrease = this.decrease.bind(this) this.increase = this.increase.bind(this) this.state = { value: 0 }; } changeSum() { this.props.dispatch({ type: 'changeSum', payload: { id: this.props.id, value: this.state.value } }) } decrease() { let self = this; this.setState({ value: this.state.value - 1 }, () => { self.changeSum() }) } increase() { let self = this; self.setState({ value: this.state.value + 1 }, () => { self.changeSum() }) } render() { const { value } = this.state; let { id } = this.props; return ( <div > <input type = "button"value = "减1" onClick = { this.decrease }/> <span > { value } < /span><br/ > <input type = "button" value = "加1" onClick = { this.increase }/> </div> ) } } // 创建reducer function reducer(state = { number: [0, 0, 0], sum: 0 }, action = {}) { if (action.type == 'changeSum') { let { id, value } = action.payload console.log("id:", id, "value:", value); state.number[id] = value let tmpSum = 0; for (let i = 0; i < state.number.length; i++) { tmpSum += state.number[i] } return Object.assign({}, state, { sum: tmpSum }); } else { return state; } } const CounterMapStateToProps = (state) => ({ }) const ManageCounterMapStateToProps = (state) => ({ sum: state.sum }) const mapDispatchToProps = (dispatch) => ({ dispatch: dispatch }) // 创建store let store = createStore(reducer) // connect连接 Counter = connect(CounterMapStateToProps, mapDispatchToProps)(Counter) ManageCounter = connect(ManageCounterMapStateToProps, mapDispatchToProps)(ManageCounter) ReactDOM.render( <Provider store = { store }> <ManageCounter /> </Provider> , document.getElementById('root'));

index.scss

$designWidth: 750; @function px2rem($px) { @return $px*10/$designWidth+rem; } #root { div { p { font-size: px2rem(300); color: #5EA1F3; text-align: center; } div { font-size: px2rem(500); display: flex; color: #64B587; border: 1px solid #F0BB40; input { flex: 1 1 auto; background-color: #64B587; font-size: px2rem(200); outline: none; color:#ffffff; } span { width: 300px; flex: 1 1 auto; text-align: center; } } .title { color: #BDBDBD; } .result { font-size: px2rem(200); } } }

想了解更多关于前端的资讯，可以来惠州北大青鸟新方舟校区了解一下。

标签：惠州前端培训学校惠州前端基础惠州前端培训北大青鸟IT计算机学校北大青鸟IT软件学校前端北大青鸟IT学校惠州北大青鸟北大青鸟

上一篇：Web前端开发|什么是CSS派生选择器？_惠州前端培训学校
下一篇：新手应该如何入门Web前端开发？_惠州前端培训学校

Web前端开发|Redux如何实现组合计数器？_惠州前端培训学校

相关推荐