如何存储和订阅组件状态到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; 
     ... 
    } 
}