redux

2022-05-06 20:32:10 阅读：175 来源： 互联网

标签：count selectNumber 组件 import redux store

redux

一个专门用于做状态管理的JS库，基本上与react配合使用作用：集中式管理react应用中多个组件共享的状态使用场景：某个组件的状态，需要让其他组件可以随时拿到（共享）一个组件需要改变另一个组件的状态（通信）总体原则：能不用就不用，如果不用比较吃力才考虑使用

使用案例纯react版本

import React, { Component } from 'react'

export default class Count extends Component {
    state = {
        count: 0
    }
    increment = () => {
        this.setState({
            count: this.state.count + this.selectNumber.value * 1
        })
    }
    decrement = () => {
        this.setState({
            count: this.state.count - this.selectNumber.value * 1
        })
    }
    incrementOdd = () => {
        if (this.state.count % 2 !== 0) {
            this.setState({
                count: this.state.count + this.selectNumber.value * 1
            })
        }
    }
    incrementAsync = () => {
        setTimeout(() => {
            this.setState({
                count: this.state.count + this.selectNumber.value * 1
            })
        }, 500)
    }
    render() {
        return (
            <div>
                <h1>当前求和为：{this.state.count}</h1>
                <select ref={c => this.selectNumber = c}>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>
                <button onClick={this.increment}>+</button>
                <button onClick={this.decrement}>-</button>
                <button onClick={this.incrementOdd}>奇数求和</button>
                <button onClick={this.incrementAsync}>异步加</button>
            </div>
        )
    }
}

App.js文件

import React from 'react'
import Count from './components/Count'
export default class App extends React.Component {
  render() {
    return (
      <div>
        <Count />
      </div>

    )
  }
}

redux精简版 store.js文件

//引入createStore 专门用于创建redux中最为核心的store对象
import { createStore } from 'redux'
//引入Count组件服务的reducer
import countReducer from './count_reducer'
const store = createStore(countReducer)
export default store

Count_reducer.js 文件

/*
该文件用于创建一个为Count组件服务的reducer，其本质就是一个函数
reducer函数会接到两个参数，分别为：之前的状态（prestate），动作对象（action）
*/
const initstate = 0
export default function countReducer(preState = initstate, action) {
    //从action对象中获取：type，data
    const { type, data } = action
    //根据type决定如何加工数据
    switch (type) {
        case 'increment':
            return preState + data
        case 'decrement':
            return preState - data
        default:
            return preState
    }
}

import React, { Component } from 'react'
import store from '../../redux/store'
export default class Count extends Component {
    state = {
        // count: 0
    }
    // componentDidMount() {
    //     //检测redux中状态的变化，只要变化，就调用reder
    //     store.subscribe(() => {
    //         this.setState({})
    //     })
    // }
    increment = () => {
        store.dispatch({
            type: 'increment',
            data: this.selectNumber.value * 1
        })
    }
    decrement = () => {

        store.dispatch({
            type: 'decrement',
            data: this.selectNumber.value * 1
        })

    }
    incrementOdd = () => {
        const count = store.getState()
        if (count % 2 !== 0) {
            store.dispatch({
                type: 'increment',
                data: this.selectNumber.value * 1
            })
        }
    }
    incrementAsync = () => {
        setTimeout(() => {
            store.dispatch({
                type: 'increment',
                data: this.selectNumber.value * 1
            })
        }, 500)
    }
    render() {
        return (
            <div>
                <h1>当前求和为：{store.getState()}</h1>
                <select ref={c => this.selectNumber = c}>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>
                <button onClick={this.increment}>+</button>
                <button onClick={this.decrement}>-</button>
                <button onClick={this.incrementOdd}>奇数求和</button>
                <button onClick={this.incrementAsync}>异步加</button>
            </div>
        )
    }
}

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import store from './redux/store'
const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<App />);

store.subscribe(() => {
    root.render(<App />);
})

一般对象如Object {}:为同步函数对象如function：为异步所谓异步action是指返回一个函数

基本使用明确两个概念：（1）UI组件：不能使用任何redux的api，只负责页面的呈现、交互等。（2）容器组件：负责和redux通信，将结果交给UI组件如何创建一个容器组件—靠react-redux的connect函数 connect(mapStateToProps, mapDispatchToProps) —mapStateToProps ：映射状态，返回值为一个对象 —mapDispatchToProps：映射操作状态的方法，返回值是一个对象备注：容器组件的store是靠props传进去的，而不是在容器组件中直接引入优化

纯函数 1.一类特别的函数：只要是同样的输入（实参），必定得到同样的输出（返回） 2.必须遵循以下约束

不得改写参数数据
不会产生任何副作用，例如网络请求，输入和输出设备
不能调用Date.now或者Math.random等不纯的方法

3.redux的reducer函数必须是一个纯函数

打包一个项目

npm run build ---生成一个build的文件夹 npm install -g serve —安装一个全局的serve服务器 serve -s build — 在服务器上运行打包的文件运行之后谷歌的react开发者工具正常显示

标签：count,selectNumber,组件,import,redux,store
来源： https://www.cnblogs.com/shuchenhao/p/16230310.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

redux

redux

打包一个项目