1. 程式人生 > >Redux 入門教程(三):React-Redux 的用法

Redux 入門教程(三):React-Redux 的用法

建立 www counter reducer creates 所有 port 操作 lin

作者: 阮一峰

前兩篇教程介紹了 Redux 的基本用法和異步操作,今天是最後一部分,介紹如何在 React 項目中使用 Redux。

為了方便使用,Redux 的作者封裝了一個 React 專用的庫 React-Redux,本文主要介紹它。

這個庫是可以選用的。實際項目中,你應該權衡一下,是直接使用 Redux,還是使用 React-Redux。後者雖然提供了便利,但是需要掌握額外的 API,並且要遵守它的組件拆分規範。

技術分享圖片

一、UI 組件

React-Redux 將所有組件分成兩大類:UI 組件(presentational component)和容器組件(container component)。

UI 組件有以下幾個特征。

  • 只負責 UI 的呈現,不帶有任何業務邏輯
  • 沒有狀態(即不使用this.state這個變量)
  • 所有數據都由參數(this.props)提供
  • 不使用任何 Redux 的 API

下面就是一個 UI 組件的例子。


const Title =
  value => <h1>{value}</h1>;

因為不含有狀態,UI 組件又稱為"純組件",即它純函數一樣,純粹由參數決定它的值。

二、容器組件

容器組件的特征恰恰相反。

  • 負責管理數據和業務邏輯,不負責 UI 的呈現
  • 帶有內部狀態
  • 使用 Redux 的 API

總之,只要記住一句話就可以了:UI 組件負責 UI 的呈現,容器組件負責管理數據和邏輯。

你可能會問,如果一個組件既有 UI 又有業務邏輯,那怎麽辦?回答是,將它拆分成下面的結構:外面是一個容器組件,裏面包了一個UI 組件。前者負責與外部的通信,將數據傳給後者,由後者渲染出視圖。

React-Redux 規定,所有的 UI 組件都由用戶提供,容器組件則是由 React-Redux 自動生成。也就是說,用戶負責視覺層,狀態管理則是全部交給它。

三、connect()

React-Redux 提供connect方法,用於從 UI 組件生成容器組件。connect的意思,就是將這兩種組件連起來。


import { connect } from ‘react-redux‘
const VisibleTodoList = connect()(TodoList);

上面代碼中,TodoList是 UI 組件,VisibleTodoList就是由 React-Redux 通過connect方法自動生成的容器組件。

但是,因為沒有定義業務邏輯,上面這個容器組件毫無意義,只是 UI 組件的一個單純的包裝層。為了定義業務邏輯,需要給出下面兩方面的信息。

(1)輸入邏輯:外部的數據(即state對象)如何轉換為 UI 組件的參數

(2)輸出邏輯:用戶發出的動作如何變為 Action 對象,從 UI 組件傳出去。

因此,connect方法的完整 API 如下。


import { connect } from ‘react-redux‘

const VisibleTodoList = connect(
  mapStateToProps,
  mapDispatchToProps
)(TodoList)

上面代碼中,connect方法接受兩個參數:mapStateToPropsmapDispatchToProps。它們定義了 UI 組件的業務邏輯。前者負責輸入邏輯,即將state映射到 UI 組件的參數(props),後者負責輸出邏輯,即將用戶對 UI 組件的操作映射成 Action。

四、mapStateToProps()

mapStateToProps是一個函數。它的作用就是像它的名字那樣,建立一個從(外部的)state對象到(UI 組件的)props對象的映射關系。

作為函數,mapStateToProps執行後應該返回一個對象,裏面的每一個鍵值對就是一個映射。請看下面的例子。


const mapStateToProps = (state) => {
  return {
    todos: getVisibleTodos(state.todos, state.visibilityFilter)
  }
}

上面代碼中,mapStateToProps是一個函數,它接受state作為參數,返回一個對象。這個對象有一個todos屬性,代表 UI 組件的同名參數,後面的getVisibleTodos也是一個函數,可以從state算出 todos 的值。

下面就是getVisibleTodos的一個例子,用來算出todos


const getVisibleTodos = (todos, filter) => {
  switch (filter) {
    case ‘SHOW_ALL‘:
      return todos
    case ‘SHOW_COMPLETED‘:
      return todos.filter(t => t.completed)
    case ‘SHOW_ACTIVE‘:
      return todos.filter(t => !t.completed)
    default:
      throw new Error(‘Unknown filter: ‘ + filter)
  }
}

mapStateToProps會訂閱 Store,每當state更新的時候,就會自動執行,重新計算 UI 組件的參數,從而觸發 UI 組件的重新渲染。

mapStateToProps的第一個參數總是state對象,還可以使用第二個參數,代表容器組件的props對象。


// 容器組件的代碼
//    <FilterLink filter="SHOW_ALL">
//      All
//    </FilterLink>

const mapStateToProps = (state, ownProps) => {
  return {
    active: ownProps.filter === state.visibilityFilter
  }
}

使用ownProps作為參數後,如果容器組件的參數發生變化,也會引發 UI 組件重新渲染。

connect方法可以省略mapStateToProps參數,那樣的話,UI 組件就不會訂閱Store,就是說 Store 的更新不會引起 UI 組件的更新。

五、mapDispatchToProps()

mapDispatchToPropsconnect函數的第二個參數,用來建立 UI 組件的參數到store.dispatch方法的映射。也就是說,它定義了哪些用戶的操作應該當作 Action,傳給 Store。它可以是一個函數,也可以是一個對象。

如果mapDispatchToProps是一個函數,會得到dispatchownProps(容器組件的props對象)兩個參數。


const mapDispatchToProps = (
  dispatch,
  ownProps
) => {
  return {
    onClick: () => {
      dispatch({
        type: ‘SET_VISIBILITY_FILTER‘,
        filter: ownProps.filter
      });
    }
  };
}

從上面代碼可以看到,mapDispatchToProps作為函數,應該返回一個對象,該對象的每個鍵值對都是一個映射,定義了 UI 組件的參數怎樣發出 Action。

如果mapDispatchToProps是一個對象,它的每個鍵名也是對應 UI 組件的同名參數,鍵值應該是一個函數,會被當作 Action creator ,返回的 Action 會由 Redux 自動發出。舉例來說,上面的mapDispatchToProps寫成對象就是下面這樣。


const mapDispatchToProps = {
  onClick: (filter) => {
    type: ‘SET_VISIBILITY_FILTER‘,
    filter: filter
  };
}

六、<Provider> 組件

connect方法生成容器組件以後,需要讓容器組件拿到state對象,才能生成 UI 組件的參數。

一種解決方法是將state對象作為參數,傳入容器組件。但是,這樣做比較麻煩,尤其是容器組件可能在很深的層級,一級級將state傳下去就很麻煩。

React-Redux 提供Provider組件,可以讓容器組件拿到state


import { Provider } from ‘react-redux‘
import { createStore } from ‘redux‘
import todoApp from ‘./reducers‘
import App from ‘./components/App‘

let store = createStore(todoApp);

render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById(‘root‘)
)

上面代碼中,Provider在根組件外面包了一層,這樣一來,App的所有子組件就默認都可以拿到state了。

它的原理是React組件的context屬性,請看源碼。


class Provider extends Component {
  getChildContext() {
    return {
      store: this.props.store
    };
  }
  render() {
    return this.props.children;
  }
}

Provider.childContextTypes = {
  store: React.PropTypes.object
}

上面代碼中,store放在了上下文對象context上面。然後,子組件就可以從context拿到store,代碼大致如下。


class VisibleTodoList extends Component {
  componentDidMount() {
    const { store } = this.context;
    this.unsubscribe = store.subscribe(() =>
      this.forceUpdate()
    );
  }

  render() {
    const props = this.props;
    const { store } = this.context;
    const state = store.getState();
    // ...
  }
}

VisibleTodoList.contextTypes = {
  store: React.PropTypes.object
}

React-Redux自動生成的容器組件的代碼,就類似上面這樣,從而拿到store

七、實例:計數器

我們來看一個實例。下面是一個計數器組件,它是一個純的 UI 組件。


class Counter extends Component {
  render() {
    const { value, onIncreaseClick } = this.props
    return (
      <div>
        <span>{value}</span>
        <button onClick={onIncreaseClick}>Increase</button>
      </div>
    )
  }
}

上面代碼中,這個 UI 組件有兩個參數:valueonIncreaseClick。前者需要從state計算得到,後者需要向外發出 Action。

接著,定義valuestate的映射,以及onIncreaseClickdispatch的映射。


function mapStateToProps(state) {
  return {
    value: state.count
  }
}

function mapDispatchToProps(dispatch) {
  return {
    onIncreaseClick: () => dispatch(increaseAction)
  }
}

// Action Creator
const increaseAction = { type: ‘increase‘ }

然後,使用connect方法生成容器組件。


const App = connect(
  mapStateToProps,
  mapDispatchToProps
)(Counter)

然後,定義這個組件的 Reducer。


// Reducer
function counter(state = { count: 0 }, action) {
  const count = state.count
  switch (action.type) {
    case ‘increase‘:
      return { count: count + 1 }
    default:
      return state
  }
}

最後,生成store對象,並使用Provider在根組件外面包一層。


import { loadState, saveState } from ‘./localStorage‘;

const persistedState = loadState();
const store = createStore(
  todoApp,
  persistedState
);

store.subscribe(throttle(() => {
  saveState({
    todos: store.getState().todos,
  })
}, 1000))

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById(‘root‘)
);

完整的代碼看這裏。

八、React-Router 路由庫

使用React-Router的項目,與其他項目沒有不同之處,也是使用ProviderRouter外面包一層,畢竟Provider的唯一功能就是傳入store對象。


const Root = ({ store }) => (
  <Provider store={store}>
    <Router>
      <Route path="/" component={App} />
    </Router>
  </Provider>
);

(完)

Redux 入門教程(三):React-Redux 的用法