问Props在一次刷新中更新了3次

EN

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {}
  }

  componentDidMount() {
    if (isUserAuthenticated() === true) {
      const token = window.localStorage.getItem('jwt');
      if (token) {
        agent.setToken(token);
      }
      this.props.appLoad(token ? token : null, this.props.history);
    }
  }

  render() {
    const PrivateRoute = ({ component: Component, ...rest }) => (
      <Route {...rest} render={(props) => (
        isUserAuthenticated() === true
          ? <Component {...props} />
          : <Redirect to='/logout' />
      )} />
    )

    return (

      <React.Fragment>
        <Router>
          <Switch>
            {routes.map((route, idx) =>
              route.ispublic ?
                <Route path={route.path} component={withLayout(route.component)} key={idx} />
                :
                <PrivateRoute path={route.path} component={withLayout(route.component)} key={idx} />
            )}
          </Switch>
        </Router>
      </React.Fragment>
    );
  }
}

export default withRouter(connect(mapStatetoProps, { appLoad })(App));

export const appLoad = (token, history) => {
    return {
        type: APP_LOAD,
        payload: { token, history }
    }
}

import { APP_LOAD, APP_LOADED, APP_UNLOADED, VARIFICATION_FAILED } from './actionTypes';

const initialState = {
    appName: 'Etsync',
    token: null,
    user: null,
    is_logged_in: false
}

const checkLogin = (state = initialState, action) => {
    switch (action.type) {
        case APP_LOAD:
            state = {
                ...state,
                user: action.payload,
                is_logged_in: false
            }
            break;

        case APP_LOADED:
            state = {
                ...state,
                user: action.payload.user,
                token: action.payload.user.token,
                is_logged_in: true
            }
            break;
        case APP_UNLOADED:
            state = initialState
            break;
        case VARIFICATION_FAILED:
            state = {
                ...state,
                user: null,
            }
            break;
        default:
            state = { ...state };
            break;
    }
    return state;
}

export default checkLogin;

import { takeEvery, fork, put, all, call } from 'redux-saga/effects';

import { APP_LOAD } from './actionTypes';
import { appLoaded, tokenVerificationFailed } from './actions';
import { unsetLoggeedInUser } from '../../helpers/authUtils';
import agent from '../agent';
function* checkLogin({ payload: { token, history } }) {
    try {
        let response = yield call(agent.Auth.current, token);
        yield put(appLoaded(response));
    } catch (error) {
        if (error.message) {
            unsetLoggeedInUser();
            yield put(tokenVerificationFailed());
            history.push('/login');
        } else if (error.response.text === 'Unauthorized') {
            unsetLoggeedInUser();
            yield put(tokenVerificationFailed());
        }
    }
}

export function* watchUserLogin() {
    yield takeEvery(APP_LOAD, checkLogin)
}

function* commonSaga() {
    yield all([fork(watchUserLogin)]);
}

export default commonSaga;

//importing part

class EcommerceProductEdit extends Component {

    constructor(props) {
        super(props);
        this.state = {}
    }

    componentDidMount() {
        **//seeing the props changes**
        console.log(this.props);
        this.props.activateAuthLayout();
        if (this.props.user !== null && this.props.user.shop_id)
            this.props.onLoad({
                payload: Promise.all([
                    agent.Products.get(this.props.user),
                ])
            });
    }

    render() {

        return (
            // JSX code removed for making code shorter
        );
    }
}

const mapStatetoProps = state => {
    const { user, is_logged_in } = state.Common;
    const { products } = state.Products.products.then(products => {
                    return products;
    });
    return { user, is_logged_in, products };
}

export default connect(mapStatetoProps, { activateAuthLayout, onLoad })(EcommerceProductEdit);