score:3

Accepted answer

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.

score: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;
        ... 
    }
}

Related Query

More Query from same tag