0
点赞
收藏
分享

微信扫一扫

React React-redux

残北 2022-06-27 阅读 101
reactidejson数据OpenStack云计算

学习目标

  • React-Redux学习（不需用subscribe）
  • mapStateToProps
  • mapDispatchToProps
  • connect

安装： cnpm install react-redux --save

  概念：


  • Provider组件：自动的将store里的state和组件进行关联。
  • MapStatetoProps：这个函数用于将store的state映射到组件的里props
  • mapdispatchToProps:将store中的dispatch映射到组件的props里，实现了方法的共享。
  • Connect方法：将组件和数据（方法）进行连接\

mapStateToProps（state, ownProps）

  • state: store的state
  • 订阅store的状态变化，每次store发生改变时，mapStateToProps都会被调用。
  • ownProps（可选）
  • ownProps代表组件本身的props，如果写了第二个参数ownProps，那么当prop发生变化的时候，mapStateToProps也会被调用。例如，当 props接收到来自父组件一个小小的改动，那么你所使用的 ownProps 参数，mapStateToProps 都会被重新计算）。
  • 如果不传，组件不会监听store的变化，也就是说Store的更新不会引起UI的更新

mapDispatchToProps

  • mapDispatchToProps用于建立组件跟store.dispatch的映射关系
  • 可以是一个object，也可以传入函数
  • 如果mapDispatchToProps是一个函数，它可以传入dispatch,ownProps, 定义UI组件如何发出action，实际上就是要调用dispatch这个方法

connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])

  • mapStateToProps(state, ownProps) : stateProps
  • 将store中的数据作为props绑定到组件上。
  • mapDispatchToProps(dispatch, ownProps): dispatchProps
  • 将action作为props绑定到组件上。
  • [mergeProps(stateProps, dispatchProps, ownProps): props]
  • mapStateToProps() 与 mapDispatchToProps() 的执行结果和组件自身的 props 将传入到这个回调函数中。该回调函数返回的对象将作为 props 传递到被包装的组件中。
  • 通常情况可以不传这个参数， connect就会使用 Object.assign 替代该方法。
  • options
  • 定制connector行为。
  • 很少用到，可略过。

mapStateToProps是必选，如果为空，可以写成：

connect(null,mapDispatchToProps)(Topic)、connect(() => {return {}},mapDispatchToProps)(Topic)

实例一 React-Redux使用

import React from 'react';
import ReactDOM from 'react-dom';
import {createStore} from 'redux';
import {Provider, connect, dispatch} from 'react-redux'
class Counter extends React.Component {
    render() {
        // 计数，通过store的state传给props，直接通过props就可以将state的数据获取
        const value = this.props.value;
        // 将修改数据的事件或者方法传入到props
        const onAddClick = this.props.onAddClick;
        // 等同于vuex的mapMutation mapState
        return  (
            <div>
                <h1>计数数量：{value}</h1>
                <button onClick={onAddClick}>数字+1</button>
            </div>
        )
    }
}
const addAction = {
    type: 'add'
}
function reducer(state={num:0}, action) {
    switch(action.type) {
        case "add":
            state.num++;
            break;
        default:
            break;
    }
    return {...state};
}
const store = createStore(reducer);
//第一步：将state映射到props中
function mapStateToProps(state) {
    return {
        value: state.num
    }
}
//第二步：将修改state数据的方法，映射到props，默认会传入store里的dispatch方法
function mapDispatchToProps(dispatch) {
    return {
        onAddClick:()=>{dispatch(addAction)}
    }
}
// 将上面的2个方法，将数据仓库的state和修改state的方法映射到组件上，形成新的组件
const App = connect(
    mapStateToProps, // 第一步
    mapDispatchToProps // 第二步
)(Counter)
ReactDOM.render(
    <Provider store={store}>
        <App/>
    </Provider>,
    document.querySelector('#root')
)

React React-redux_react

实例二 通过ActionFnObj实现多个函数

import React from 'react';
import ReactDOM from 'react-dom';
import {createStore} from 'redux';
import {Provider, connect, dispatch} from 'react-redux'
class Counter extends React.Component {
    render() {
        // 计数，通过store的state传给props，直接通过props就可以将state的数据获取
        const value = this.props.value;
        // 将修改数据的事件或者方法传入到props
        const onAddClick = this.props.onAddClick;
        // 等同于vuex的mapMutation mapState
        return  (
            <div>
                <h1>计数数量：{value}</h1>
                <button onClick={onAddClick}>数字+1</button>
                <button onClick={this.props.onAddClick5}>数字+5</button>
            </div>
        )
    }
}
const addAction = {
    type: 'add'
}
let ActionFnObj = {
    add: function (state,action) {
        state.num++;
        return state
    },
    addNum: function (state, action) {
        state.num = state.num + action.num;
        return state
    }
}
function reducer(state={num:0}, action) {
    if (action.type.indexOf('redux') == -1) {
        state = ActionFnObj[action.type](state, action)
        return {...state};
    } else {
        return state;
    }
}
const store = createStore(reducer);
//第一步：将state映射到props中
function mapStateToProps(state) {  // state作为形参是固定的
    return {
        value: state.num
    }
}
//第二步：将修改state数据的方法，映射到props，默认会传入store里的dispatch方法
function mapDispatchToProps(dispatch) { // dispatch作为形参是固定的
    return {
        onAddClick:()=>{dispatch(addAction)},
        onAddClick5:()=>{dispatch({type:"addNum", num:5})}
    }
}
// 将上面的2个方法，将数据仓库的state和修改state的方法映射到组件上，形成新的组件
const App = connect(
    mapStateToProps, // 第一步
    mapDispatchToProps // 第二步
)(Counter)
ReactDOM.render(
    <Provider store={store}>
        <App/>
    </Provider>,
    document.querySelector('#root')
)

 

React React-redux_json_02

实例三 react-redux 使用前后代码比较

React React-redux_react_03

React React-redux_json_04

React React-redux_json_05

React React-redux_ide_06

React React-redux_react_07

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

const reducer = function(state = {num:1}, action) {
    if (action.type === 'handle_Decrement_Event') {
        const newState = JSON.parse(JSON.stringify(state));
        newState.num--;
        return newState;
    } else if (action.type === 'handle_Add_Event') {
        state.num++;
        return state;
    }

    return state;
}

const store = createStore(reducer);

class CounterCom extends React.Component {
    constructor(props) {
        super(props);
        this.handleDecrementClick = this.handleDecrementClick.bind(this);
    }
    render() {
        let state = store.getState();
        return (
            <div>
                <button onClick={this.handleDecrementClick}>-</button>
                <span>{state.num}</span>
                <button onClick={() => this.handleAddClick()}>+</button>
            </div>
        )
    }

    handleDecrementClick() {
        const action = {
            type: "handle_Decrement_Event"
        }
        store.dispatch(action);
    }

    handleAddClick() {
        const action = {
            type: "handle_Add_Event"
        }
        store.dispatch(action);
    }
}

ReactDOM.render(
    <CounterCom />,
    document.querySelector('#root')
)

store.subscribe(() => {
    ReactDOM.render(
        <CounterCom/>,
        document.querySelector('#root')
    )
})
import React from 'react';
import ReactDOM from 'react-dom';
import {createStore} from 'redux';
import {Provider, connect} from 'react-redux'

class CounterCom extends React.Component {
    render() {
        const {num, onDecrementClick, onAddClick} = this.props;
        return (
            <div>
                <button onClick={onDecrementClick}>-</button>
                <span>{num}</span>
                <button onClick={onAddClick}>+</button>
            </div>
        )
    }
}

const onDecrementClick = {type: 'handle_Decrement_Event'};
const onAddClick = {type: 'handle_Add_Event'};

const reducer = function(state = {num:1}, action) {
    if (action.type === 'handle_Decrement_Event') {
        const newState = JSON.parse(JSON.stringify(state));
        newState.num--;
        return newState;
    } else if (action.type === 'handle_Add_Event') {
        const newState = JSON.parse(JSON.stringify(state));
        newState.num++;
        return newState;
    }

    return state;
}

const store = createStore(reducer);

function mapStateToProps(state) {
    return {
        num: state.num
    }
}

function mapDispatchToProps(dispatch) {
    return {
        onAddClick: () => dispatch(onAddClick),
        onDecrementClick: () => dispatch(onDecrementClick)
    }
}

const App = connect(
    mapStateToProps,
    mapDispatchToProps
)(CounterCom)

ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.querySelector('#root')
)

参考链接


http://www.manongjc.com/article/11555.html      [记React connect的几种写法(小结)] ​​http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_three_react-redux.html​​      [Redux 入门教程（三）：React-Redux 的用法


举报

相关推荐

【React】redux和React-redux

逻辑回归机器学习数据挖掘

React-Redux

react.jsjavascript前端

React之React-Redux

React-reduxProviderconnectmapStateToPropsideLinux系统/运维

Redux 和 React-redux

React基础前端

Redux、 React-Redux学习

React余温前端开发那些事儿redux

【React】Redux、React-Redux简介及应用

react.jsjavascript前端

React-Redux（一）

javascriptreact.js开发语言数据数据源JavaScript前端开发

react-redux——使用redux——使用react-redux这个扩展简化操作

react.jsjavascript前端数据ideSpark大数据

React -32 react-redux源码解读

reactReact.js前端开发yyds干货盘点

React中react-redux和路由

数据应用程序重定向Html/CSS前端开发yyds干货盘点
0 条评论