managing state in next.js with redux - reactjs

Question

I am new to next.js and I am building a small application to test how to manage state which I will implement in a larger app. I followed the documentation to set up my store... below is my reducer
const bindMiddleware = (middleware) => {
if (process.env.NODE_ENV !== 'production') {
const { composeWithDevTools } = require('redux-devtools-extension')
return composeWithDevTools(applyMiddleware(...middleware))
}
return applyMiddleware(...middleware)
}
const combinedReducer = combineReducers({
reducers,
})
const reducer = (state, action) => {
if (action.type === HYDRATE) {
const nextState = {
...state, // use previous state
...action.payload, // apply delta from hydration
}
if (state.loading.loading) nextState.loading.loading = state.loading.loading // preserve count value on client side navigation
return nextState
} else {
return combinedReducer(state, action)
}
}
const initStore = () => {
return createStore(reducer, bindMiddleware([thunkMiddleware]))
}
export const wrapper = createWrapper(initStore)
and my -app.js folder
import { wrapper } from '../Store/store'
const WrappedApp = ({ Component, pageProps }) => {
return (
<Fragment>
<HeadComponent />
<Component {...pageProps} />
</Fragment>
)
}
export default wrapper.withRedux(WrappedApp)
in my index.js file which I will also share, I managed the state locally which is fine since it is a small app. I want to learn how to manage this with redux so that I can replicate this in a larger project I will be working on. thanks
const App = () => {
const [posts, setPosts] = useState([])
const [loading, setLoading] = useState(false)
const [userInput, setUserInput] = useState("")
useEffect(() => {
setLoading(true)
axios.get("https://jsonplaceholder.typicode.com/posts")
.then(response => {
setLoading(false)
setPosts(response.data)
})
.catch(error => {
console.log(error)
})
}, [])
const handleChange = (e) => {
setUserInput({ ...userInput, [e.target.name]: e.target.value })
}
const handleSubmit = (e) => {
setLoading(true)
e.preventDefault()
const payload = {
firstName: userInput.firstName,
lastName: userInput.lastName,
password: userInput.password
}
axios.post("https://jsonplaceholder.typicode.com/users", payload)
.then(response => {
console.log(response);
setLoading(false)
})
.catch(error => {
console.log(error)
})
}
return (
<div>
<div style={{ textAlign: "center" }}>
<form onSubmit={handleSubmit}>
<input type="text" name="firstNmae" placeholder="First name" onChange={handleChange} /> <br />
<input type="text" name="lastName" placeholder="Last name" onChange={handleChange} /> <br />
<input type="password" name="password" placeholder="Password" onChange={handleChange} /> <br />
<input type="reset" />
<button>Submit</button>
</form>
</div>
{loading ? <div className={style.spinnerPositioning}><Loader /></div> : <div className={styles.container}>
{posts.map(item => {
return (
<ul key={item.id}>
<li>{item.title}</li>
</ul>
)
})}
</div>}
</div>
)
}
export default App;

Answer 1

If you have to implement Redux into Next.JS this with-redux might solved your problem or Next.JS Faq there is an article there for redux.
You can ask the community of next.js on this link