react-redux

最新推荐文章于 2023-12-28 10:08:43 发布

MiyukkiYan

最新推荐文章于 2023-12-28 10:08:43 发布

阅读量237

点赞数

分类专栏： react

本文链接：https://blog.csdn.net/weixin_44478972/article/details/111145123

版权

本文介绍了如何将React与Redux进行深度集成，避免手动订阅store，简化组件与store的交互。通过Provider在入口文件注入store，并使用connect进行状态映射和操作映射，实现组件与仓库的连接。

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

更加接近react，跟React进行了一个深度的集成

好处：
要获取仓库中的值，不需要手动的调用 store.subscribe

注意点：
1、不再需要导入store，然后手动的监听我们仓库中值的改变了, 它会自动监听
2、store 中的代码不用变，React组件中的代码要改变
3、我们所有的获取仓库中的值和更改仓库中的值，都必须经过
组件的props，它其实是把获取仓库中的值和更改仓库中的值
挂载到 props【它跟react-router-dom很像】

步骤：
https://react-redux.js.org/introduction/quick-start
1、安装 redux react-redux
yarn add redux react-redux

2、在 index.js中写 Provider 的代码
一般写在入口文件中，通过 Privider 给 App组件及其所有子组件注入 store

import React from 'react'
import ReactDOM from 'react-dom'

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

import App from './App'

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

3、在需要仓库的每个组件中写 connect