React中的react-redux

程序员徐小白

于 2020-02-19 17:16:11 发布

阅读量98

点赞数

分类专栏： react学习笔记文章标签： react

本文链接：https://blog.csdn.net/weixin_45865724/article/details/104395630

版权

react学习笔记专栏收录该内容

16 篇文章 0 订阅

订阅专栏

本文详细介绍了如何在React应用中集成Redux，实现状态管理和自动渲染。通过创建reducer、store，以及使用Provider和connect方法，展示了组件如何与store中的状态和操作进行交互。

摘要由CSDN通过智能技术生成

1.作用

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

2. 几个概念

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

3.安装

 cnpm i react-redux --seve

4.基本使用

导入react-redux

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

创建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}
}

创建store

var store=createStore(reducer)

创建映射函数

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

创建一个组件

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>
        )
    }
}

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

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

将组件渲染到页面

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