在react脚手架种简单的使用redux

最新推荐文章于 2024-09-13 07:58:02 发布

gentry-jh

最新推荐文章于 2024-09-13 07:58:02 发布

阅读量960

点赞数

文章标签： react.js javascript ecmascript

本文链接：https://blog.csdn.net/webblock/article/details/121263266

版权

本文介绍了如何在React项目中使用Redux。首先创建React项目，然后安装Redux，接着配置store.js，编写reducer和action。最后在Count组件中引入store，并在index.js中进行更新处理，完成Redux的简单集成。

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

创建你的react项目，并且按照如图所示，创建文件夹以及文件：

Count组件内容：

import React,{Component} from 'react'

export default class Count extends Component {
    increment = () => {

    }
    decrement = () => {

    }
    incrementOdd = () => {

    }
    incrementAsync = () => {

    }
    render(){
        return (
            <div>
                <h1>当前求和为：？？？</h1>
                <select ref={ e => this.selectEl = e}>
                    <option value='1'>1</option>
                    <option value='2'>2</option>
                    <option value='3'>3</option>
                    <option value='4'>4</option>
                </select>
                <button onClick={ this.increment }>+</button>
                <button onClick={ this.decrement }>-</button>
                <button onClick={ this.incrementOdd }>当前求和为奇数+</button>
                <button onClick={ this.incrementAsync }>异步+</button>
            </div>
        )        
    }
}

App中引入Count组件：

import React,{Component} from 'react'
import Count from './Count'

export default class App extends Component {
    render(){
        return (
            <div>
                <Count/>
            </div>
        )
    }
}

准备好了Count组件，接下来准备redux

第一步下载 redux:

npm install redux

redux下载完毕。

我们找到redux文件夹下的store.js文件：

import { createStore } from 'redux'

import countReducer from './reducer'

//创建一个store并且接管countReducer
export default createStore(countReducer)

接下来写reducer

let initState = 0

export default function countReducer(preState = initState,action){
    let { type, data } = action

    switch(type){
        case 'increment':
            return preState + data
        case 'decrement':
            return preState - data
        default:
            return preState
    }
}

准备action:

export const createIncrementAction = (data) => ({type:'increment',data})

export const createDecrementAction = (data) => ({type:'decrement',data})

好了，此时store已经就位了，我们就可以到项目中使用了

Count组件中引入store:

import store from '../redux/store'
import { createIncrementAction, createDecrementAction } from '../redux/action'

//store.getState() 获取store中的状态
<h1>当前求和为：{ store.getState() }</h1>


increment = () => {
    let { value } = this.selectEl
    store.dispatch(createIncrementAction(value*1))
}

decrement = () => {
    let { value } = this.selectEl
    store.dispatch(createDecrementAction(value*1))
}

incrementOdd = () => {
    if(store.getState() % 2){
        store.dispatch(createIncrementAction(value*1))
    }
}

incrementAsync = () => {
    setTimeout(()=>{
        store.dispatch(createIncrementAction(value*1))
    })
}

//store.dispatch()触发相应的动作并且修改状态

最后还要做一个更新处理

在src根目录下的index.js中：

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import store from './redux/store'

ReactDOM.render(<App/>,document.getElementById('root'))

store.subscribe(() => {
    ReactDOM.render(<App/>,document.getElementById('root'))
})

以上就是redux的简单使用