React中的react-redux

1.作用

在redux的基础上实现state数据改变时自动渲染

2. 几个概念

1. Provider组件：自动的将store中的state与组件进行关联
2. 映射方法：这里需要两个映射方法，分别将store的state和dispatch映射到组件中
3. Connent方法：将组件和store中的数据与方法进行连接

3.安装

 cnpm i react-redux --seve

4.基本使用

1. 导入react-redux

import Redux,{createStore} from 'redux'
//需要导入redux来创建store
import {Provider,connect} from 'react-redux'

2. 创建reducer

var reducer=function(state={num:0},action){
    switch(action.type){
        case 'add':
            state.num++
            break
        case 'reduce':
            state.num--
            break
        default:
            break
    }
    return {...state}
}

3. 创建store

var store=createStore(reducer)

4. 创建映射函数

//映射函数
//映射state中的数据
function mapStateToProps(state){
    return{
    //返回一个对象，里面放想要获取的数据
        value:state.num
    }
}
//映射dispatch
function mapDispatchToProps(dispatch){
    return{
        addFunction:()=>{dispatch({type:"add"})},
        reduceFunction:()=>{dispatch({type:"reduce"})}
    }
}

5. 创建一个组件

class Counter extends React.Component{
    render(){
        //绑定store中的state
        var value=this.props.value
        //绑定store中的dispatch
        var addClick=this.props.addFunction
        var reduceClick=this.props.reduceFunction
        return (
        <div>
            <h3>计算数据：{value}</h3>
            <button onClick={addClick}>+1</button>
            <button onClick={reduceClick}>-1</button>
        </div>
        )
    }
}

6. 使用connect将上面的映射函数和组件连接成一个新组建

var App=connect(
//这里写两个映射函数
    mapStateToProps,
    mapDispatchToProps
)(Counter)
//这里写组件名称

7. 将组件渲染到页面

ReactDOM.render(
    <Provider store={store}>
        {/* 将我们创建的store进行绑定 */}
        <App></App>
    </Provider>
    ,document.getElementById('app')
)