介紹

我們先把react component做個區別， Component有分 Component 跟 Container. Container 就是會跟redux有互動的， Container 處理狀態跟資料然後把相關的資料分給下面的Component。 那Component就是單存的把container傳給它的資料顯現出來，還有處理靜態的東西（比如html, css）。 有時候container又稱為smart component(聰明的組件) 然後 component 為笨的組件(笨的組件)。

設定

我會用我的recipe 專案來做教學。 Recipebox Github

1. 首先我們先安裝react-redux

npm install --save react-redux

2. 接下來我們在index.js把redux 跟react 串起來。 React-redux api 提供 讓我們的redux store 傳給所有的 container。 那以下的例子就是把store傳給 。

//index.js
import { createStore } from 'redux';
import reducer from './reducers';
import { Provider } from 'react-redux';
...
const store = createStore(reducer);
...
ReactDOM.render(
  <Provider store={store}>
  <App />
  </Provider>,
  document.getElementById('root')
);

3. 然後我們去我們的container (App.js) 然後我們用mapStateToProps， mapDispatchToProps把redux的狀態傳過來

mapStateToProps 是串redux的state 。
mapDispatchToProps 是串redux的action。

// App.js
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import * as RecipeActions from '../actions/index';
...
const mapDispatchToProps = dispatch => ({
  actions: bindActionCreators(RecipeActions, dispatch)
})

const mapStateToProps = (state) => {
  return {
    recipes: state.recipes
  }
};
...
connect connect(mapStateToProps, mapDispatchToProps)(App); //記得加這行

4. 如果你照以上的步驟，現在的container有redux裡面的 state 跟 action。 我們可以用console.log來檢查。

// App.js
    // console.log(this.props)
    const {actions, recipes} = this.props;

5.現在我們把state跟action 當成props 傳給我們的components(dumb components). 在以下的例子，我們把我們的質傳給Recipelist 跟AddForm component. 接下來我就可以在我的 component呼喚那些 action 跟 state。

//App.js
  <Grid>
    <Header />
    <Recipelist
      recipes={recipes}
      deleterecipe={actions.deleteRecipe}
      editrecipe={actions.editRecipe}
    />
    <AddForm
      addrecipe={actions.addRecipe}
    />
  </Grid>

結尾

以上就是如何把redux跟react串在一起。 當我們的App慢慢長大，我們需要一個中央狀態管理器。 那你以為這樣就結束了嗎？ 當然不是， 我明天教大家如何用redux dev tool. Redux dev tool 是一個chrome的工具 我們可以追蹤我們的action.

參考連結

• FCC Recipebox Github
• FCC Recipebox Demo
• Redux React Documentation