【React】04-05 React-redux 计数器实例

安装

cnpm install react-redux --save

概念

provider组件

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

mapStateToProps（自实现）

这个函数用于将store里的state映射到组件里的props

mapDispatchToProps

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

connect方法

将组件和数据（方法）进行链接

*react-redux的优点：不需要使用subscribe了

使用方法

1.初始化数据

创建reducer

//设置reducer的方法一
function reducer(state={num:0},action){
    //indexOf('str')用于判断字符串中是包含指定字符串并返回其所在位置，如果没有则返回-1
    //访问action.type之前需要确认其是否在redux中，
    //如果在，说明此时还没有state和action值，就返回一个新的state
    //如果不在，说明已有state值，返回当前的state即可
    if(action.type.indexOf('redux')==-1){
        state = ActionFnObj[action.type](state,action)
        return {...state}
    }else{
        return state
    }
}

//设置reducer的方法二
// function reducer(state={num:0},action){
//     switch(action.type){
//         case "add":
//             state.num++;
//             break;
//         default:
//             break;
//     }
//     return {...state}
// }

实例化store（数据仓库）

const store = createStore(reduce)

2.数据的获取

将state里的数据映射到组件的props中

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

将修改数据的方法映射到组件的props中

//将修改state数据的方法，映射到props,默认会传入store里的dispatch方法
function mapDispatchToProps(dispatch) {
    return{
        onAddClick:()=>{dispatch(addAction)}
    }
}

将组件和数据（方法）进行关联

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

最终效果

完整代码

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)
        //计数 通过store的state传给props，直接通过props就可以将state的数据获取
        const value = this.props.value;
        //将修改数据的事件和方法传入到props
        const onAddClick = this.props.onAddClick;
        const onMinusClick = this.props.onMinusClick;
        //等同于vuex的mapMutation mapState
        return(
            <div>
                <h1>计数的数量：{value}</h1>
                <button onClick={onAddClick}>+1</button>
                <button onClick={onMinusClick}>-1</button>

            </div>
        )
    }


}

const addAction = {
    type:'add'
}
const minusAction = {
    type:'minus'
}

let ActionFnObj = {
    add:function(state,action){
        state.num++
        return state
    },
    minus:function(state,action){
        state.num--
        return state
    }
}

//设置reducer的方法一
//访问action.type之前需要确认其是否在redux中，
//如果在，说明此时还没有state和action值，就返回一个新的state
//如果不在，说明已有state值，返回当前的state即可
function reducer(state={num:0},action){
    console.log(state)
    console.log(action)
    if(action.type.indexOf('redux')===-1){
        console.log("妹在有redux的情况"+state)
        console.log("妹在有redux的情况"+action)
        state = ActionFnObj[action.type](state,action)
        return {...state}
    }else{
        console.log("有在redux的情况"+state)
        console.log("有在redux的情况"+action)
        return state
    }
}


//设置reducer的方法二
// 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)},
        onMinusClick:()=>{dispatch(minusAction)}
    }
}

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

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