react-redux 的使用

最新推荐文章于 2025-12-11 18:20:43 发布

原创最新推荐文章于 2025-12-11 18:20:43 发布 · 395 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #前端 #前端框架

react 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了如何在React应用中使用ReactRedux，包括安装、Provider组件的作用、connect方法的使用以及如何通过mapStateToProps和mapDispatchToProps订阅并操作Reduxstore。通过实例展示了如何在TotoList组件中连接store并处理增删改操作。

react-redux

React Redux 是 Redux 的官方 React UI 绑定库。它使得你的 React 组件能够从 Redux store 中读取到数据，并且你可以通过dispatch actions去更新 store 中的 state

安装

npm install --save react-redux

Provider

React Redux 包含一个 <Provider /> 组件，这使得 Redux store 能够在应用的其他地方使用

改造 index.js 页面，引入Provider

import { Provider } from 'react-redux'
import store from './store'

通过 Provider 组件将 store 放在了全局的组件可以够得到的地方

<Provider store={store} >
   <TotoList />
 </Provider>

connect

connect 方法会帮助我们订阅 store ，当 store 中的状态发生更改的时候，会帮助我们重新渲染组件
connect 方法会让我们获取 store 中的状态，将状态通过组件的 props 属性映射给组件
connect 方法可以让我们获取 dispatch 方法

引入connect

import { connect } from 'react-redux'

connect 有两个值，一个是 mapStateToProps ，用于将 state 的数据通过 props 属性映射给组件

const mapStateToProps = state => ({
  list: state.list
})

一个是 mapDispatchToProps ，让我们获取 dispatch 方法，可以将方法映射组件

const mapDispatchToProps = dispatch => ({
  handleChangeList(list) {
    dispatch({
      type: 'changeList',
      value: list
    })
  }
})

最后指定要映射的组件

connect(mapStateToProps, mapDispatchToProps)(TotoList);

这样我们就能在组件 TotoList 使用属性和方法了

完整代码

import React, { useRef, useState, startTransition } from 'react';
import { connect } from 'react-redux'

const TotoList = ({ list, handleChangeList }) => {
  const inputRef = useRef()

  const [value, setValue] = useState('')

  const items = list.map((item, index) => {
    return (<div key={index}><p>{item}<span onClick={() => handledel(index)}> 删除</span></p></div>)
  })

  const handleChange = () => {
    startTransition(() => {
      setValue(inputRef.current.value)
    })
  }

  const handleAdd = () => {
    let newList = [...list]
    newList.push(inputRef.current.value)
    handleChangeList(newList)
    setValue('')
  }

  const handledel = (key) => {
    const newList = [...list]
    newList.splice(key, 1)
    handleChangeList(newList)
  }

  return (
    <div>
      <div>
        <input ref={inputRef} value={value} onChange={handleChange} />
        <button onClick={handleAdd}>新增</button>
      </div>
      {items}
    </div>
  )
}

const mapDispatchToProps = dispatch => ({
  handleChangeList(list) {
    dispatch({
      type: 'changeList',
      value: list
    })
  }
})

const mapStateToProps = state => ({
  list: state.list
})

export default connect(mapStateToProps, mapDispatchToProps)(TotoList);