B站 React教程笔记day2（3）React-Redux

最新推荐文章于 2025-02-16 00:21:28 发布

转载最新推荐文章于 2025-02-16 00:21:28 发布 · 141 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/houfee/p/10931954.html

本文详细介绍了Redux与React集成的步骤，包括设置reducer、创建store、使用Provider组件及connect函数，展示了如何在React应用中引入Redux状态管理，实现组件与store的连接，以及如何通过dispatch触发action来更新state。

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

刚才我们学习了Redux，大致步骤：

设置一个reducer，
弄一个store，从Redux.createStore(reducer);
弄一个render函数
注册一下render，store.subscibe(render)
写监听了，此时要记得store.dispatch(action)，不是直接改store。

此时和React还没有直接产生关系，换句话说在React中没有使用Redux技术。

可看官方counter案例

结合官方文档看官方demo

React-Redux给我们提供了两个东西：Provider组件、connect函数。

Provider组件要求是最大的组件，传入store属性，此时天下无人不识君。

官方文档：https://github.com/reactjs/react-redux/tree/master/docs

index.js：

import React from 'react'
import { render } from 'react-dom'
import { createStore } from 'redux'
import { Provider } from 'react-redux'
import App from './components/App'
import reducer from './reducers'
import 'todomvc-app-css/index.css'

const store = createStore(reducer)

render(
    // 全局组件，传入store属性
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)

Provider自定义组件：

Makes the Redux store available to the connect() calls in the component hierarchy below。

这个Provider组件使得它内部的自定义组件可以使用connect()函数。

Normally, you can’t use connect() without wrapping a parent or ancestor component in <Provider>

通常的，你不能在没有Provider父亲或者组件的情况下，使用connect()函数。

属性store (Redux Store): APP中唯一的那个store

App.js：

import React from 'react'
import Header from '../containers/Header'
import MainSection from '../containers/MainSection'

const App = () => (
  <div>
    <Header />
    <MainSection />
  </div>
)

export default App

Connects a React component to a Redux store.

将React组件和Redux的store进行连接。

connect providing a convenient API for the most common use cases.

connect提供了一个方便的API能够适应绝大多数工作。

It does not modify the component class passed to it; instead, it returns a new, connected component class for you to use

它没有更改你传进来的类，返回会返回一个已经连接好的新类。

第一个参数：mapStateToProps

If this argument is specified, the new component will subscribe to Redux store updates.

如果你传入了第一个参数，此时这个组件将注册Redux的store的更新信息。

This means that any time the store is updated, mapStateToProps will be called.

这意味着无论任何时候store被更改了，mapStateToProps函数将会被调用。

The results of mapStateToProps must be a plain object, which will be merged into the component’s props.

mapStateToProps 的返回值必须是一个纯JSON！这个JSON将与组件的props融合。也就是说，这个返回的JSON中的key将自动成为组件的props中的成员。

If you don't want to subscribe to store updates, pass null or undefined in place of mapStateToProps.

如果你不想订阅store的更新，此时不要传这个参数就行了，此时用null占一个位置即可。

export default connect(

  null,

  mapDispatchToProps

)(App)

第2个参数，mapDispatchToProps

If a function is passed, it will be given dispatch.

如果第往connect函数中传入了第二个参数，且是一个函数，那么这个函数将获得dispatch方法，这可是可以号令action发出的方法啊！可以间接导致stage的改变。

It’s up to you to return an object that somehow uses dispatch to bind action creators in your own way.

返回一个对象如何绑定action creator（返回action的函数，就是action creator）取决于你自己

Tip: you may use the bindActionCreators() helper from Redux.

小提示：你可以使用bindActionCreators()方法轻松的将action creator接口和dispatch进行绑定。

If you omit it, the default implementation just injects dispatch into your component’s props.

如果你省略了第二个参数，此时系统还是会将dispatch对象注入到你的组件中，但是不好用，因为你看不见action清单，所以还是需要用bindActionCreators()去处理一下。

转载于:https://www.cnblogs.com/houfee/p/10931954.html