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()去處理一下。