react-redux的使用

react-redux的基本使用

index.js

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 />);

// 检测redux中状态的改变，如果redux的状态发生了改变，那么重新渲染App组件
store.subscribe(()=>{
    root.render(<App />);
})

app.js store向子组件传递的参数

import Count from './containers/Count/Count'
import store from './redux/store';

function App() {
  return (
    <div className="App">
      <Count store={store}></Count>
    </div>
  );
}

export default App;

redux文件下所有的文件不变

新建容器组件：containers->Count->Count.jsx

// 引入Count的UI组件
import countUi from '../../components/Count'
import {createIncrementAction,createDecrementAction,createIncrementAsyncAction} from '../../redux/count_action'
// 引入counnect用于链接UI组件与redux
import {connect} from 'react-redux'

// a函数返回的对象中的key就作为传递给UI组件props的key，value就作为传递给UI组件props的value--状态
function mapStateTopProps(state){
    return {count:state}
}
// b函数返回的对象中的key就作为传递给UI组件props的key，value就作为传递给UI组件props的value--操作状态的方法
function mapDispatchToProps(dispath){
    return {jia:(number)=>{
        dispath(createIncrementAction(number))
    },jian:(number)=>{
        dispath(createDecrementAction(number))
    },jianAsync:(number)=>{
        dispath(createIncrementAsyncAction(number,500))
    }}
    
}

// 使用connect()()创建并暴露一个Count的容器组件
export default connect(mapStateTopProps,mapDispatchToProps)(countUi)

ui组件：components->count->index.jsx

import React, { Component } from 'react';



class Index extends Component {


    increment=()=>{
        const {value} = this.selectNumber
        this.props.jia(Number(value))
    }
    decrement=()=>{
        const {value} = this.selectNumber
        this.props.jian(Number(value))
    }
    incrementIfOdd=()=>{
        const {value} = this.selectNumber
        if(this.props.count % 2 !== 0){
            this.props.jia(Number(value))
        }
    }
    incrementAsync=()=>{
        const {value} = this.selectNumber
        this.props.jianAsync(Number(value))
        
    }

    render() {
        console.log('ui接收',this.props)
        return (
            <div>
            <h1>当前求和为{this.props.count}</h1>
            <select ref={c=>this.selectNumber = c}>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
            </select>&nbsp;
            <button onClick={this.increment}>+</button>&nbsp;
            <button onClick={this.decrement}>-</button>&nbsp;
            <button onClick={this.incrementIfOdd}>当前求和为奇数再加</button>&nbsp;
            <button onClick={this.incrementAsync}>异步加</button>
        </div>
        );
    }

   
}

export default Index;

优化：

简写mapDispatch

之前写法

function mapDispatchToProps(dispath){
    return {jia:(number)=>{
        dispath(createIncrementAction(number))
    },jian:(number)=>{
        dispath(createDecrementAction(number))
    },jianAsync:(number)=>{
        dispath(createIncrementAsyncAction(number,500))
    }}
    
}

 优化写法

const mapDispatchToProps = {
    jia:createIncrementAction,
    jian:createDecrementAction,
    jianAsync:createIncrementAsyncAction
}

编写Person

之前写法 App.js

import Count from './containers/Count/Count'
import store from './redux/store';

function App() {
  return (
    <div className="App">
      <Count store={store}></Count>
    </div>
  );
}

export default App;

优化写法 index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import store from './redux/store';
import {Provider} from 'react-redux'


ReactDOM.createRoot(document.getElementById('root')).render(
    <Provider store={store}>
        <App />
    </Provider>
);

整合UI组件和容器组件

import React, { Component } from 'react';
// 引入Count的UI组件
// import countUi from '../../components/Count'
import {createIncrementAction,createDecrementAction,createIncrementAsyncAction} from '../../redux/count_action'
// 引入counnect用于链接UI组件与redux
import {connect} from 'react-redux'
class Index extends Component {
    increment=()=>{
        const {value} = this.selectNumber
        this.props.jia(Number(value))
    }
    decrement=()=>{
        const {value} = this.selectNumber
        this.props.jian(Number(value))
    }
    incrementIfOdd=()=>{
        const {value} = this.selectNumber
        if(this.props.count % 2 !== 0){
            this.props.jia(Number(value))
        }
    }
    incrementAsync=()=>{
        const {value} = this.selectNumber
        this.props.jianAsync(Number(value),500)
        
    }

    render() {
        console.log('ui接收',this.props)
        return (
            <div>
            <h1>当前求和为{this.props.count}</h1>
            <select ref={c=>this.selectNumber = c}>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
            </select>&nbsp;
            <button onClick={this.increment}>+</button>&nbsp;
            <button onClick={this.decrement}>-</button>&nbsp;
            <button onClick={this.incrementIfOdd}>当前求和为奇数再加</button>&nbsp;
            <button onClick={this.incrementAsync}>异步加</button>
        </div>
        );
    }

   
}

// 映射状态
function mapStateTopProps(state){
    return {count:state}
}
// 映射操作状态的方法
const mapDispatchToProps = {
    jia:createIncrementAction,
    jian:createDecrementAction,
    jianAsync:createIncrementAsyncAction
}



// 使用connect()()创建并暴露一个Count的容器组件
export default connect(mapStateTopProps,mapDispatchToProps)(Index)