React React-redux

學習目標

• React-Redux學習（不需用subscribe）

安裝： cnpm install react-redux --save

 

概念：

• Provider組件：自動的將store裏的state和組件進行關聯。
• MapStatetoProps：這個函數用於將store的state映射到組件的裏props
• mapdispatchToProps:將store中的dispatch映射到組件的props裏，實現了方法的共享。
• Connect方法：將組件和數據（方法）進行連接

實例一 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')
)

實例二 通過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')
)