ilonacodes
Patreon
Investor Profile
Contact

Financial tips and advice on investment for developers:
"Learn how to free extra monthly cash from your dev-salary for investment"

There are so many different ways to free money for investments without thinking of getting another job. Download my Top-15 cash-freeing tips cheat sheet.

Get my 15 Tips to Invest More Cash Monthly!
19
Mar
2017
#javascript
#react
#redux
#react-router

Clear Form in Redux when Navigating with React-Router

19 Mar, 2017

Hi there!

I have worked on my project using a React-Redux architecture with React-Router for navigation. I have implemented forms for adding and editing resources. I have observed weird behavior:

  1. Add new resource with a description: “Hello World!”
  2. Start editing another resource with a description: “My new comment…”
  3. Input for description contains a previous value: “Hello World!”

I was expecting to see the current description of the resource: “My new comment…”, not the value from the previous form.

In my case, I was handling the state of the current form by using the same reducer:

// Change form action
export const changeForm = (name, value) => {
  let change = {};
  change[name] = value;
  return {
    type: "FORM_CHANGE",
    change
  }
};

// form reducer
export const form = (state = {}, action) => {
  switch (action.type) {
    case "FORM_CHANGE":
      return {
          ...state,
          ...action.change
      }

    default:
        return state;
  }
};

I would like to share the solution that worked for me, my dear reader.

Clear State of the Form on Every Navigation

First of all, we need to create a new action “ROUTER.CHANGE” in the routes for handling router change:

export const ROUTER = {
  CHANGE: "ROUTER_CHANGE"
};

export const changeRouter = (change) => ({
  type: ROUTER.CHANGE,
  change
});

Secondly, we should dispatch this action whenever the user navigates somewhere:

hashHistory.listen(change => store.dispatch(changeRouter(change)));

The next step is to add a new case “ROUTER.CHANGE” in the form reducer and clean up the current state, by returning an empty object:

// form reducer
export const form = (state = {}, action) => {
  switch (action.type) {
    case "FORM_CHANGE": ...

    case ROUTER.CHANGE:
       return {};

    default: ...
  }
};

Conclusion

Now the form state clears itself on every navigation. You can find the whole code change here.

Thank you for reading!

Tags | #javascript #react #redux #react-router
Next: How to Center Sign Up Form in 3 Simple Steps

My name is Ilona, and I'm a software engineer, founder, and blogger who is (besides programming) also passionate about startups, finance and investment

"I like to work hard for things that are worth it."
The latest articles:
Numbrs Review - App For Personal Finances (Germany & UK only)
How Developers Can Get Symbols From Stock Indexes With Python
Bitcoin Profit Calculator For Developers

Imprint
Privacy Policy
© 2021 ilonacodes
© 2021 ilonacodes
Imprint
Privacy Policy