CODEWITHSUNDEEP
reactjsreduxlocal-storagereact-reduxmiddleware
Rafonix
Rafonix

Reputation: 159

Save data in localstorage after call proper action. React & Redux

I'm going to save in localstorage some data, but only after call UPDATE_POST action. Now i'm apply localstorage in index.js via:

store.subscribe(throttle(() => {
  post: saveState(store.getState().post);
}, 1000))

and it save data in localstorage for every second. But my goal is to save it only after updatePost action. Can I achieve it using middleware, and how to write it?

My reducer:

const Post = (state = {}, action) => {
  switch (action.type) {
    case 'INIT_POST':
        ..... some code
    case 'UPDATE_POST':
        ... some code
    default:
      return state
  }
};

My action: 

export const updatePost = (...items) => ({
    type: 'UPDATE_POST',
    items
});

Upvotes: 0

Views: 1445

Answers (1)

MorganIsBatman
MorganIsBatman

Reputation: 1010

I use Redux-thunk for this (https://github.com/gaearon/redux-thunk) - it lets you write action creators that return a function instead of an action - allowing you to perform async tasks in the action, then hit the reducer.

With redux-thunk you can call an async function (performSomeAsyncFunction() in example below), get the response, deal with it (such as the saveDataToLocalStorage() dummy function below), then hit the reducer to update your state:

export const startUpdatePost = (...items) => {
  return (dispatch) => {
    return performSomeAsyncFunction(...items).then((response) => {
      dispatch(updatePost(...items));
      saveDataToLocalStorage()

    });
  };
};
  • Don't forget to also handle the failure of the async function above

Upvotes: 1

Related Questions