Question

我有一个容器“HomeIndexView”和组件“Table” 我有表的全局和本地组件状态。

全局表状态如下所示，

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

表的局部组件状态如下所示，

 componentWillMount() {
   this.setInitialState();
  }

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

当用户登录时，在HomeIndexView中，它通过提取显示数据库中的所有表。所以我想要做的是将本地组件状态连接到redux存储，以便当它将状态false更改为true时，它会更改表的背景颜色。我应该如何将本地状态连接到redux商店？我应该为本地组件的状态创建单独的reducer和action吗？

提前致谢

- 编辑1

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

我将LocalComponent（Table）导入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'库包含React和Redux之间的绑定方法。如果您还没有这样做，我真的建议您退房 Dan Abramov's: 'Getting into Redux'系列视频。

他详细介绍了从头开始构建一个有效的Redux应用程序，然后再与React一起做同样的事情（再次从头开始））。

他最终确定了'react-redux'帮助程序库的使用，以便更轻松地将React与Redux连接起来。

最终的解决方案是：

使用Redux中的connect方法创建Redux容器组件（只是具有Redux绑定的React组件的术语）
- mapStateToProps会收到有关您可以映射到目标组件props的商店当前状态的更新。您可以使用它来获取商店的当前状态，以便在您的组件中使用
- mapDispatchToProps获取商店的调度操作，您可以使用该操作将操作创建者绑定到（以更新商店）。您可以使用它来连接更新商店状态的动作创建者。

Answer 2

我假设你已经设置了减速器和动作。现在，您唯一需要做的就是从LocalComponent发送一个动作。

假设您有一个名为toggleTableState的方法来更新tableBusy的状态LocalComponent。

<强> 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;
        ... 
    }
}

如何将组件状态存储和订阅到redux存储？

2 个答案: