在Reduces中设置Redux的初始状态

时间:2019-09-16 21:59:14

标签: reactjs redux react-redux redux-thunk

大家好,我不得不将reducer的初始状态设置为某个值,让我向您展示代码

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

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键值,所以我可以轻松地将其设置为array或将其硬编码的对象但是在这里,我需要将其值设置为我的另一个reducer中已经存在的值,那么我该如何实现呢?

2 个答案:

答案 0 :(得分:1)

假设您需要等待<dependency> <groupId>org.projectlombok</groupId> <artifactId>lombok</artifactId> <version>1.18.10</version> <scope>provided</scope> </dependency> 成功在您的"fetchuser"中设置信用,您也可以在creditsreducer中处理"fetchuser"的操作:

creditsreducer

答案 1 :(得分:1)

始终保留以前的减速器状态值。否则,请勿使用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;
   }
 }

像上面那样改变所有的异径管。