如何存儲和訂閱組件狀態到Redux存儲？

Question

我有一個容器「HomeIndexView」和組件「表」 而且我有全局和本地組件狀態表。

全局表的狀態是像下面，

const initialState = { 
    allTables: [], 
    showForm: false, 
    fetching: true, 
    formErrors: null, 
}; 

和局部表的組件的狀態是像下面，

componentWillMount() { 
    this.setInitialState(); 
    } 

setInitialState() { 
    this.setState({ tableBusy: false }); 
} 

當，在HomeIndexView用戶登錄，它示出了從數據的所有表通過獲取基地。 所以我想要做的是將本地組件狀態連接到redux store，以便當它將state false更改爲true時，它會更改表的背景顏色。我應該如何將本地狀態連接到Redux商店？我應該爲本地組件的狀態創建單獨的縮減器和操作？

在此先感謝

--edit 1

import Table    from '../../components/tables/table'; 

我進口LocalComponent（表），以HomeIndexView顯現。 在我HomeIndexView，它呈現的所有表從數據庫，

_renderAllTables() { 
const { fetching } = this.props; 

let content = false; 


if(!fetching) { 
    content = (
    <div className="tables-wrapper"> 
     {::this._renderTables(this.props.tables.allTables)} 
    </div> 
    ); 
} 


return (
    <section> 
    <header className="view-header"> 
     <h3>All Tables</h3> 
    </header> 
    {content} 
    </section> 
); 
} 


_renderTables(tables) { 


    return tables.map((table) => { 
     return <Table 
      key={table.id} 
      dispatch={this.props.dispatch} 
      {...table} />;    
    }); 

    } 

    render() { 
    return (
    <div className="view-container tables index"> 
    {::this._renderAllTables()} 
    </div> 
    ); 
    } 

Answer 1

的'react-redux'庫包含反應，終極版之間的結合的方法。如果你還沒有這樣做，我真的建議檢查 Dan Abramov's: 'Getting into Redux'系列視頻。

他進入一個良好的金額細節有關如何從頭開始構建一個工作終極版應用程序，然後怎麼做同樣與陣營一起（再次從頭開始）的。

他最終確定了使用'react-redux'幫助程序庫進行接線的步驟。

爲您所得到的解決方案是：

• 使用connect方法終極版創建一個Redux的容器組件（只是與終極版綁定一個陣營組成部分的術語）

  • mapStateToProps接收商店當前狀態的更新，您可以將其映射到目標組件props。 Yo'd使用它來得到你的組件

  • mapDispatchToProps它得到您可以用行動創造者結合（更新存儲）專賣店的派遣行動店裏使用的當前狀態。您可以使用它來連接更新商店狀態的動作創建者。

Answer 2

我假設你已經設置你的減速和行動。現在你唯一需要做的就是從你的LocalComponent發出一個動作。

假設你有一個方法toggleTableState用於更新你的LocalComponent的狀態tableBusy。

LocalComponent.js

---

import React, { PureComponent, PropTypes } from 'react'; 
import { connect } from 'react-redux'; 
import * as actions from './actions`; 

@connect(
    (state, props) => ({ 
    isTableBusy: state.isTableBusy, 
    }), 
    { 
    toggleTableGlobalState: actions.toggleTableGlobalState, 
    }) 
export default class LocalComponent extends PureComponent { 

    static propTypes = { 
     toggleTableGlobalState: PropTypes.func, 
     isTableBusy: PropTypes.bool, 
    } 

    ... 

    toggleTableState() { 
     this.setState({ tableBusy: !this.state.tableBusy }); 
     this.props.toggleTableGlobalState(!this.state.tableBusy); 
    } 

    ... 

} 

actions.js

---

export const TOGGLE_TABLE_STATE = 'TOGGLE_TABLE_STATE'; 

export function toggleTableGlobalState(tableState) { 
    return { type: TOGGLE_TABLE_STATE, tableState }; 
} 

reducer.js

---

import { TOGGLE_TABLE_STATE } from './actions'; 

export default function reducer(state = initialState, action = {}) { 
    switch (action.type) { 

     ... 

     case TOGGLE_TABLE_STATE: 
      return { ...state, isTableBusy: action.tableState }; 
      break; 
     ... 
    } 
}