Update redux in the reactjs function, then use the state

manpreet Best Answer 2 years ago

I need to open a search aid and select a value there and get it back.

When I click on the button, I open a search help, I put the data I selected into a store, but how can I use it when I come back? I need to write the data I selected from the search help directly into an input on the front side.

   async showPopup(){
      const LazyLoadingComponent=await import('../../CP/SearchHelp/searchHelp');
      this.setState({lazyLoadComponent:React.createElement(LazyLoadingComponent.default)});
      await ShowPopup('http://localhost:3070/api/WorkCenter/GetWorkCenters');
      console.log(this.state.selectedRow);
      if(this.state.selectedRow!==''){
        this.setState({WorkCenterCode:this.state.selectedRow.WorkCenterCode});
      }
    }

Here in some way I have to wait until the page is imported. In the showpopup, I actually show the data that needs to be updated by updating the redux in the search help.

export async function ShowPopup(apiUrl){
    var apiData=await APIGetWorkCenters(apiUrl);
    SearchHelApiData(await JSON.parse(apiData.data));
    SearchHelPopupOpen(true);
}


export const SearchHelPopupOpen=(popupOpen)=>{
    store.dispatch({
        type:'SearchHelp_popupOpen',
        popupOpen:popupOpen
    });
}

export const SearchHelApiData=(apiData)=>{
    store.dispatch({
        type:'SearchHelp_apiData',
        apiData:apiData
    });
}

Here I need to make my searchhelp component async and component until closing. I share the codes of the searchhelp component below.

class SearchHelp extends BasePage {

  constructor(props){
    super(props);
    this.connect(['SearchHelp']);
    this.onSelectionChanged = this.onSelectionChanged.bind(this);
  }

  componentDidMount(){
    SearchHelSelectedRow('');
  }


    toggle = () => {
      SearchHelApiData('');
      SearchHelPopupOpen(false);
    }

    onSelectionChanged({ selectedRowsData }) {
      const data = selectedRowsData[0];
      SearchHelSelectedRow(data);
      SearchHelApiData('');
      SearchHelPopupOpen(false);
    }

    render() {
      return (

manpreet 2 years ago

In order for you to use Redux in your SearchHelp component and gain access to the Redux store, you need to connect your component to the store which I don't see you doing.

You need to three things basically to get things working, a reducer, actionCreator and a store to hold state changes. When you have these then you would have to connect your component to the store by using the connect higher order function which takes two arguments and wraps your component giving you access to the data stored in the store.

As an example, given your component SearchHelp, you can connect to the store by doing this:

import { connect } from 'redux'

class SearchHelp extends BasePage { ... }

function mapStateToProps(state) {
   // this function has access to your redux store, so you can access the properties there
   // it should return an object
   return {
      stateProp1: state.stateProp1,
      stateProp2: state.stateProp2,
      ...
   }
}

function mapDispatchToProps() {
   // this function is not required as you could simply pass in your actions directly
}
export default connect(mapStateToProps, mapDispatchToProps)(SearchHelp)

An example reducer looks like below:

function reducerName(state = {}, action) {
   switch(action.type) {
      case ACTION_TYPE:
      return { stateProp1: action.data // };
      ...

      default:
      return state;
   }
}