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

Question

I have a container "HomeIndexView" and component "Table" And I have both global and local component state of table.

Global table states are like below,

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

and local component state of table is like below,

 componentWillMount() {
   this.setInitialState();
  }

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

When a user logs in, in HomeIndexView, it shows all tables from data base through fetching. So what I want to do is that connecting local component state to redux store so that when it changes state false to true, it changes background color of table. How should I connect local state to redux store? and should I create separate reducer and action for the local component's state?

Thanks in advance

--EDIT 1

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

I am importing LocalComponent (Table) to HomeIndexView to show. In my HomeIndexView, it renders all tables from database,

_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

The 'react-redux' library contains binding methods between React and Redux. If you haven't done so already, I really recommend checking out Dan Abramov's: 'Getting into Redux' series of videos.

He goes into a good amount of detail about how to build a working Redux application from scratch and then how to do the same in conjunction with React (again from scratch).

He finalises on the use of the 'react-redux' helper library to make wiring up React with Redux easier.

The resulting solution for you would be to:

• Use the connect method in Redux to create a Redux container component (just a term for a React component with Redux bindings)

  • mapStateToProps receives updates on the current state of the store which you can map to the target components props . Yo'd use this to get the current state of the store for use in your component

  • mapDispatchToProps which gets the store's dispatch action which you can use to bind action creators to (to update the store). You'd use this to connect the action creators that update the state of your store.

Answer 2

I assume you've already setup your reducers and actions. Now the only thing you need to do is dispatch an action from your LocalComponent .

Lets say you've a method called toggleTableState for updating the state tableBusy of your 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;
        ... 
    }
}