MENU

React学习笔记【18】

第二十一节

React-Redux

安装react-redux
npm install react-redux --save

Provider组件

自动将store里的state和根组件进行关联

mapStateToProps函数

用于将store中的state映射到组件的props

mapDispatchToProps函数

将store中的dispatch映射到组件的props里,实现了方法的共享

connect

将组件和数据(方法)进行连接

使用

  1. 初始化数据,创建reducer
  2. 实例化store
  3. 数据的获取,数据的修改:将state映射到组件的props里,将修改数据的方法映射到组件的props里
  4. 使用connect进行关联得到关联之后的新组件

本节代码

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore } from 'redux'
import { Provider, connect } from 'react-redux'

class Counter extends React.Component {
    render() {
        console.log(this.props);
        const value = this.props.value;//计数,通过store的state传给props,直接通过props就可以将state的数据获取
        const onIncrementClick = this.props.onIncrementClick;//将修改数据的事件或方法传入
        const onIncrement5 = this.props.onIncrement5;
        return (
            <div>
                <h1>计数的数量:{value}</h1>
                <button onClick={onIncrementClick}>计数+1</button>
                <button onClick={onIncrement5}>计数+5</button>
            </div>
        )
    }
}

const incrementAction = {
    type: 'increment'
}

let ActionFnObj = {
    increment: function (state, action) {
        state.num++;
        return state;
    },
    incrementNum: function (state, action) {
        state.num = state.num + action.num;
        return state;
    }
}

function reducer(state = { num: 0 }, action) {
    if (action.type.indexOf('redux') === -1) {
        console.log(action);
        state = ActionFnObj[action.type](state, action);
        return { ...state };
    } else {
        return state;
    }
}

const store = createStore(reducer)

//将state映射到props函数
function mapStateToProps(state) {
    return {
        value: state.num
    }
}

//将修改state数据的方法映射到props,默认会传入store的dispatch方法
function mapDispatchToProps(dispatch) {
    //里面放的内容相当于<Counter onIncrementClick={dispatch('increment')}/>
    return {
        onIncrementClick: () => { dispatch(incrementAction) },
        onIncrement5: () => { dispatch({ type: 'incrementNum', num: 5 }) }
    }
}

//将上面两个方法,数据仓库的state和修改state的方法映射到组件上,形成新的组件
const App = connect(
    mapStateToProps,
    mapDispatchToProps
)(Counter);


//使用Provider渲染
ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.querySelector("#root")
)

文章标题:React学习笔记【18】
如果文中内容侵犯了您的权益,请及时与博主取得联系进行删除!
本站文章未经许可禁止转载,本文地址:https://blog.wanvale.com/archives/280/

Archives QR Code Tip
QR Code for this page
Tipping QR Code