CODEWITHSUNDEEP
reactjsreduxreact-reduxredux-thunk
RRR uzumaki
RRR uzumaki

Reputation: 1328

Setting the initial state of redux in reducers

Hey guys i am stuck in a situation in which i have to set the inital state of reducer to some value let me show you the code

First of all i have an action creater like this

export const fetchuser = () => {
  return async dispatch => {
    const res = await axios.get("/api/currentuser");
    dispatch({
      type: "fetchuser",
      payload: res.data
    });
  };
};

which just fetches the data from api and dispatches an action to reducer

export default function(state = {}, action) {
  switch (action.type) {
    case "fetchuser":
      return action.payload||false;
    default:
      return state;
  }
}

now in second action creater i have to make a post request and increase the "credits" value in user database 

export const handletoken = token => {
  return async dispatch => {
    const res = await axios.post("/api/stripe", token);
    dispatch({ type: "credits", payload: res.data });
  };
};

so i get the updated value here then i pass this on to the reducer 

export default function(state = {}, action) {
  switch (action.type) {
    case "credits":
      return action.payload
    default:
      return state;
  }
}

and then combine them in reducer/index.js

export default combineReducers({
auth: authreducer,
credits:creditsreducer
});

console log of auth reducer in app.js in mapstatetoprops function gives

 auth:
credits: 40
googleid: "109463598810933991924"
__v: 0
_id: "5d7fff2c4cb0604139055ce4"

so in credits reducer as u can see i have defined initial value of state as an empty object but i want to set it as the value of credits key of auth reducer, I could easily set it to array or an object hardcoding it but here i need to set its value as a value which is already in my another reducer so how can i achieve this ?

Upvotes: 0

Views: 686

Answers (2)

SM Chinna
SM Chinna

Reputation: 341

Always keep previous reducer state value. Otherwise no use of redux state value. like this

1.export default function(state = {}, action) {
   switch (action.type) {
      case "fetchuser":
        let data = action.payload||false;
        return {
          ...state,
          fetchuser: data       //any where you can access fetchuser data as well as previous state will not change.
        }
      default:
        return state;
   }
 }

Change all the reducers like above.

Upvotes: 1

azundo
azundo

Reputation: 6052

Assuming you need to wait for "fetchuser" to succeed to set credits in your creditsreducer you can handle the "fetchuser" action in your creditsreducer as well:

export default function(state = {}, action) {
  switch (action.type) {
    case "fetchuser":
      return action.payload ? action.payload.credits : state;
    case "credits":
      return action.payload
    default:
      return state;
  }
}

Upvotes: 1

Related Questions