Reactjs-Redux: даже после того, как пользователь вошел в систему, mapStateToProps возвращает пользователя, сначала аутентифицированного как false, затем true

Question

Я реализовал Redux сactjs, вся моя аутентификация на месте.

Поэтому, когда пользователь проходит аутентификацию, токен сохраняется в хранилище Redx,

Я реализовал функцию mapStateToProps сМой компонент приложения для сопоставления реквизита isAuthenticated в true, если токен доступен.

Я также реализовал функцию mapDispatchToProps для отправки действия, которое проверяет статус авторизации пользователя, это действие отправляется на componentDidMount.

Проблема в том, что даже после аутентификации пользователя реквизит isAuthenticated первоначально возвращает false, а затем true.

Вот код:

class App extends Component {

  componentDidMount() {
    this.props.getAuthStatus();
  }

  render() {
    //console.log(this.props);

    return (
    <BrowserRouter>
      <div className="App">
        <Navbar {...this.props} />
        <Switch>
          <Route path="/login" component={ LoginForm } />
          <Route path="/register" component={ RegistrationForm } />
        </Switch>
      </div>
    </BrowserRouter>
    );
  }
}


const mapStateToProps = (state) => {
  return {
    isAuthenticated: state.token !== null,
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    getAuthStatus: () => { dispatch(actions.checkAuthStatus()) },
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(App);

код для действий

export const authSuccess = (token) => {
    return {
        type: 'AUTH_SUCCESS',
        token: token
    }
}

export const logout = () => {
    localStorage.removeItem('token');
    return {
        type: 'AUTH_LOGOUT'
    }
}


export const checkAuthStatus = () => {
    return (dispatch) => {
        const token = localStorage.getItem('token');
        if (token === undefined) {
            dispatch(logout());
        } else {           
                dispatch(authSuccess(token));         
        }
}

код для редукторов:

const initialState = {
    token: null,
    error: null,
    loading: false
}

export const authSuccess = (state, action) => {
    return updateObject(state, {
        token: action.token,
        error: null,
        loading: false
    })
}

export const authLogout = (state, action) => {
    return updateObject(state, {
        token: null,
    })    
}

const rootReducer = (state=initialState, action) => {
    switch (action.type){
        case 'AUTH_SUCCESS': return authReducers.authSuccess(state, action);
        case 'AUTH_LOGOUT': return authReducers.authLogout(state, action);
        default:
            return state;
    }
}

Индексный файл:

const storeEnhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose

const store = createStore(rootReducer, storeEnhancer(
    applyMiddleware(thunk)
));

const app = (
    <Provider store={ store }>
        <App />
    </Provider>
)

ReactDOM.render(app, document.getElementById('root'))

Answer 1

Если вы не включите токен в начальное состояние, вы будете видеть токен как ложный, пока не будет запущен checkAuthStatus, который в вашем случае является componentDidMount.Вы можете установить токен в значение localStorage в исходном состоянии.