React 之 react-redux

文章介绍了如何使用react-redux库来简化Redux的状态管理,强调了Provider和connect的作用,以及stateToProps和dispatchToProps的映射功能。通过创建store、定义reducer和组件的连接,展示了如何在React应用中实现累加功能。
摘要由CSDN通过智能技术生成
  1. 与redux的区别:

  1. 比较简便,不用写订阅,其实就是简化版的 Redux。

  1. 重点是提供器(Provider)和连接器(connect),还有两个映射(stateToProps、dispatchToProps)

  1. 安装react-redux、redux

npm install --save react-redux
npm install --save redux
  1. 使用react-redux实现累加

1)创建store仓库

src>store>index.js:

import { createStore } from 'redux'
import reducer from './reducer'

const store = createStore(reducer)
export default store

src>store>reducer.js:

const defaultState = {
    num: 0
}
//导出(一开始的时候,state作为形参,一开始没有值,所以让他等于defaultState)
export default (state = defaultState, action) => {
    return state
}

2) 将src 下的所有文件删除,并在src下创建index.js和Add.js

Add.js:

import React, { Component } from 'react'
import { connect } from 'react-redux'
class Add extends Component {
    render() {
        return (
            <div>
                <div>num: {this.props.num}</div>
                <button onClick={this.props.addnum}>增加</button>
            </div>
        )
    }
}
// stateToProps是一种映射关系,把原来的state映射成组件中的props属性
const stateToProps = (state) => {
    return {
        num: state.num
    }
}
// dispatchToProps也是一种映射,用于传递并修改数据,这里要返回一个对象并包含一个事件
const dispatchToProps = (dispatch) => {
    return {
        addnum() {
            const action = {
                type: 'add_fn',
                value: 1
            }

            dispatch(action)
        }
    }
}

// 导出连接器
export default connect(stateToProps, dispatchToProps)(Add)

index.js:

import React from 'react'
import { createRoot } from 'react-dom/client'
import { Provider } from 'react-redux'
import store from './store'

import Add from './Add'
const root = createRoot(document.getElementById('root'))
root.render(
// Provider (提供器)组件
    <Provider store = {store}>
        <Add />
    </Provider>
)

* 那么在 Provider 提供器里面的所有组件都可以获得store里面的数据。

3) 那么在reducer.js 通过触发action实现累加。

const defaultState = {
    num: 0
}
//导出(一开始的时候,state作为形参,一开始没有值,所以让他等于defaultState)
export default (state = defaultState, action) => {
    //对原本的state做一次深拷贝。 
    //reducer只能接收state,不能直接对它进行改变
    var newState = JSON.parse(JSON.stringify(state))
    //通过判断action的type,确定是否需要修改
    switch (action.type) {
        case 'add_fn':
            newState.num += action.value;
            break;
        default:
            break;
    }
    return newState
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值