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