时间戳

首页 > 解决方案 > 在 reducer 中设置 redux 的初始状态

reactjs - 在 reducer 中设置 redux 的初始状态

问题描述

嘿伙计们，我陷入了一种情况，我必须将减速器的初始状态设置为某个值，让我向您展示代码

首先我有一个像这样的动作创建者

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

它只是从 api 获取数据并将一个动作分派给 reducer

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

现在在第二个动作创建者中，我必须发出一个帖子请求并增加用户数据库中的“信用”值

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

所以我在这里得到更新的值然后我把它传递给减速器

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

然后将它们组合到 reducer/index.js

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

mapstatetoprops 函数中 app.js 中 auth reducer 的控制台日志给出

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

所以在 credits reducer 中你可以看到我已经将 state 的初始值定义为一个空对象，但我想将它设置为 auth reducer 的 credits 键的值，我可以很容易地将它设置为数组或硬编码它的对象但在这里我需要将其值设置为我的另一个减速器中已经存在的值，那么我该如何实现呢？

标签： reactjsreduxreact-reduxredux-thunk

解决方案

始终保持先前的减速器状态值。否则不使用 redux 状态值。像这样

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;
   }
 }

像上面一样更改所有减速器。

推荐阅读