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

刚才咱们学习了Redux，大体步骤：

1. 设置一个reducer，

2. 弄一个store，从Redux.createStore(reducer);

3. 弄一个render函数

4. 注册一下render，store.subscibe(render)

5. 写监听了，此时要记得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()去处理一下。