本质上，我试图在我的 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 })
))
)
}
如有任何帮助，我们将不胜感激!
更新:
还想添加我的 redux 记录器输出:
奇怪的是，这个 Action 没有被解雇？有效负载似乎仍然是错误的？
最佳答案
Redux Persist 有时在服务器端渲染中工作得很奇怪。也许持久化的 reducer 有问题。 Action 和 reducer 对我来说似乎很好。我和你的情况一样。所以我写了一个样板示例。所以
https://github.com/fazlulkarimweb/with-next-redux-wrapper-redux-persist
目前 Next 社区还没有这方面的官方示例。我认为那些试图寻找解决方案的人会受到这个样板的帮助。
关于reactjs - Next.js 和 redux-persist；如何在我的 Web 应用程序中保留经过身份验证的用户？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58327040/