Next.js и redux-persist;Как мне сохранить аутентифицированного пользователя в моем веб-приложении? - PullRequest
Новая
       50

Next.js и redux-persist;Как мне сохранить аутентифицированного пользователя в моем веб-приложении?

0 голосов
/ 10 октября 2019

По сути, я пытаюсь сохранить пользователя в моем приложении next.js после того, как оно вошло в систему, т.е. при любом обновлении браузера оно сохраняет данные / состояние.

Способсделать это при использовании redux , это использовать redux-persist !

Это версии: 

"next": "^9.0.5",
"redux-persist": "^6.0.0",
"redux": "^4.0.4",

Это мойpages/index.js файл. 

import { connect } from 'react-redux'
import Head from '../components/head'
import HomeLayout from '../components/Home/Home.jsx'
import 'semantic-ui-css/semantic.min.css'
import '../styles/styles.scss'

import {bindActionCreators} from 'redux'
import { logInUser } from '../store/index'


class Home extends React.Component {
   static getInitialProps ({  isLoggedIn }) {

    return {isLoggedIn}
  }

 componentDidMount() {
  logInUser()
 }

    render() {
        const { isLoggedIn } = this.props
        console.log("isLoggedIn ", isLoggedIn)
         return (
          <div>
           <Head title = 'Home' />
           <HomeLayout isLoggedIn = { isLoggedIn }/>
          </div>
         )
    }
}

const mapDispatchToProps = { logInUser }
export default connect(state =>
  state,
  mapDispatchToProps,
)(Home)

А это мой магазин 

import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import { persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage' // defaults to localStorage for web

import { createLogger } from 'redux-logger'
import thunkMiddleware from 'redux-thunk';

/* initial state */
var startState = { isLoggedIn: false }

/* action types */
export const actionTypes = {
    IS_LOGGED_IN: 'IS_LOGGED_IN'
}

/* reducer(s) */
export const reducer = (state = initialState, action) => {
    switch (action.type) {
        case 'IS_LOGGED_IN':
            return Object.assign({}, state, {
                isLoggedIn: action.isLoggedIn
            })
        default:
            return state
    }
};

/* actions */
export const logInUser = () => {
    return { type: actionTypes.IS_LOGGED_IN, isLoggedIn: true, }
}

const persistConfig = {
    key: 'root',
    storage,
    // whitelist: ['exampleData'] // place to select which state you want to persist
}

const persistedReducer = persistReducer(persistConfig, reducer)

// create a store
export const initializeStore = (initialState = startState) => {
    return createStore(
        persistedReducer,
        initialState,
        composeWithDevTools(applyMiddleware(
            thunkMiddleware,
            createLogger({ collapsed: true })
        ))
    )
}

Любая помощь будет признательна!

ОБНОВЛЕНИЕ:

Также хотел добавить вывод моего логгера с приставкой:

enter image description here

Странно, действие не увольняют? Кажется, что полезная нагрузка все еще ложна?

...