如何将组件状态存储和订阅到redux存储？-Java 学习之路

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

全局表状态如下所示，

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

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

componentWillMount() {
   this.setInitialState();
  }

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

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

提前致谢

--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>
   );
  }

2 回答

2
'react-redux' 库包含React和Redux之间的绑定方法 . 如果您还没有这样做，我真的建议您查看Dan Abramov's: 'Getting into Redux'系列视频 .

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

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

最终的解决方案是：
- 使用Redux中的 connect 方法创建Redux容器组件（只是具有Redux绑定的React组件的术语）
- mapStateToProps 接收有关商店当前状态的更新，您可以将其映射到目标组件 props . 你会用它来获取商店的当前状态，以便在你的组件中使用
- mapDispatchToProps 获取商店's dispatch action which you can use to bind action creators to (to update the store). You' d使用它来连接更新商店状态的动作创建者 .
回复于 2024-05-04T01:07:02+08:00

我假设你已经设置了减速器和动作 . 现在，您唯一需要做的就是从 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;
        ... 
    }
}

回复于 2024-05-04T01:07:02+08:00

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

2 回答

相关问题