CODEWITHSUNDEEP
reactjsreduxnext.js
Raphael
Raphael

Reputation: 149

managing state in next.js with redux

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;

Upvotes: 0

Views: 165

Answers (1)

Vince
Vince

Reputation: 869

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

Upvotes: 1

Related Questions