Redux状态管理6Redux调试工具

最新推荐文章于 2025-07-16 16:24:45 发布

Kasekale

最新推荐文章于 2025-07-16 16:24:45 发布

阅读量673

点赞数

CC 4.0 BY-SA版权

分类专栏： Job 文章标签： redux

本文链接：https://blog.youkuaiyun.com/Kasekale/article/details/78663464

Job 专栏收录该内容

15 篇文章

订阅专栏

本文介绍如何使用React-redux进行状态管理，包括Provider组件的配置与connect高阶组件的应用。通过具体示例，展示了如何定义action、reducer，并利用装饰器方式简化组件连接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用 react-redux

老赵虽然能力很强,但是用起来比较麻烦 ,为了方便管理,使用魏和尚来负责链接
cnpm i –save react-redux
忘记 subscribe ,记住 reducer action dispatch
React-redux 提供了 2个接口 ,Provider , connect 提供链接的功能

react-redux 的具体使用

Provider 组件应该在最外层,传入store 即可,只用一次.
connect 负责从外部获取组件需要的参数
Connect 可以用装饰起的方式来写

Index.js

import React from "react"
import ReactDom from "react-dom"
import { createStore , applyMiddleware ,compose } from "redux"
import thunk from "redux-thunk"
import { Provider } from "react-redux"
import App from "./App"
import { counter} from "./index.redux"

const store = createStore(counter,
    compose(applyMiddleware(thunk),
        window.devToolsExtension?window.devToolsExtension():f=>f))


ReactDom.render(
    (<Provider store = {store}>
        <App />
    </Provider>),
    document.getElementById("root")
    )

App.js

import React from "react"
import { Button } from "antd-mobile"
import {connect} from "react-redux"
import {addGun,ReduceGun,FakerGun,addGunAsync} from "./index.redux"
class App extends React.Component{
    // constructor(props){
    //     super(props);
    // }
    render(){
        return(
            <div>
                <Button type="primary" >现在有机枪{this.props.num}把</Button>
                <Button type="primary"  onClick={this.props.addGun}>申请武器</Button>
                <Button type="primary"  onClick={this.props.ReduceGun}>收缴武器</Button>
                <Button type="primary"  onClick={this.props.FakerGun}>抢武器</Button>
                <Button type="primary"  onClick={ this.props.addGunAsync }>拖2秒</Button>

            </div>
        )
    }
}

const mapStatetoProps = (state)=>{
    return {num:state}
}

const actionCreaters = {addGun,ReduceGun,FakerGun,addGunAsync}

App = connect(mapStatetoProps,actionCreaters)(App)
export default App

Index.redux.js



const ADD_GUN = "加机关枪"
const REMOVE_GUN = "减机关枪"
const FAKE_GUN = "抢机关枪"


/*reducer*/
export function counter (state=0,action){
    switch(action.type){
        case ADD_GUN:
            return state + 1
        case REMOVE_GUN:
            return state - 1
        case FAKE_GUN:
            return state * 10
        default:
            return 10
    }
}

export function addGun(){
    return {type:ADD_GUN}
}

export function ReduceGun(){
    return {type:REMOVE_GUN}
}

export function FakerGun(){
    return {type:FAKE_GUN}
}

export function addGunAsync(){
    return dispatch=>{
        setTimeout(()=>{dispatch(addGun())},500)
    }
}