After redux calls store.dispatch in the js of the tool class to change the state, the component cannot be updated automatically.

1. The question is as follows: after getting store in any js utility class, the page cannot be updated automatically after the status of store.dispatch (actions), is changed? Can the page be automatically updated only when the state of the dispatch that is automatically injected into the props with the page component connect?

2. The code is as follows

Home page components:

class Home extends Component{
    constructor(props){
        super(props);
        this.goUser = this.goUser.bind(this)
    }
    goUser() {
        let {dispatch} = this.props;
        // dispatch
         **dispatch(setDialogState({showDialog: true}));**
         // 

> 


          **utils.setDialogState({showDialog: true});**
        this.props.history.push("/user")
    }
    render() {
        return (
          <div>
            <h3>home</h3> 
            <button onClick={this.goUser}></button>
          </div>
        )
    }
}
export default connect()(Home);

the utils.js file is as follows:

import storeConfigure from "../store";
import  {setDialogState} from "../actions";
const appStore = storeConfigure()
export default {
  setDialogState: function(data){
    appStore.dispatch(setDialogState(data))
  }
}

user.js page components

import React,{Component} from "react";
import Dialog from "./Dialog";
import { connect } from "react-redux"
class User extends Component{
    constructor(props){
        super(props);
    }
    componentWillMount() {
        alert("componentWillMount user")
    }
    componentWillReceiveProps(nextProps){
      alert("componentWillReceiveProps user")
    }
    render() {
        return (
          <div>
            <h3>user</h3>
            <Dialog show={this.props.showDialog}/>
          </div>
        )
    }

}
const mapStateToProps = function(state) {
    return {
      showDialog:  state.app.showDialog
    }
}
export default connect(mapStateToProps)(User);

the js contents of app chunks under the reducers folder are as follows

import * as types from "../actions/actionType"
let initialState = {
    showDialog: false
}
export function app(state=initialState,action){
    switch(action.type){
        case types.SET_DIALOG_STATE:
          return Object.assign({},initialState,action.data);
          break;
        default :
          return Object.assign({},initialState,action.data);
          break;
    }
}

store.js is as follows:

import {createStore} from "redux";
import reducers from "../reducers";

export default function configureStore(initialState) {
  let store = createStore(reducers, initialState,
    //  redux-devtools
    window.devToolsExtension ? window.devToolsExtension() : undefined
  );
  return store;
}
Mar.02,2021

import {createStore} from 'redux';
import reducers from '../reducers';

export default function configureStore(initialState) {
  let store = createStore(reducers, initialState,
    //  redux-devtools
    window.devToolsExtension ? window.devToolsExtension() : undefined
  );
  return store;
}



App.js
createStore(),storeutilscreateStore
store

store.js:
const store = createStore
expoert default store 


import store from './store' store.dispatch connectstore

connect is the bridge between redux and react. Your store.dispatch here should be related to redux operations

Menu