首页 > 解决方案 > 在 React Redux 中,我在一个组件中向商店分派了两次,但只有一个有效负载被传送到商店

问题描述

我正在使用 React Native 并将有效负载发送到我的 redux 存储:在检索到 accessToken 和 firebase_userId 后。

它们是使用函数发送dispatch()的。useEffect()

当我记录我的状态时,redux store只有accessToken被发送到商店而不是 firebase_userId。

如何从我的组件一次分派两个有效负载,以便将它们都发送到我的redux store

操作顺序:

用户登录 --> 检索accessTokenfirebase_userId-->state设置为这两个值 -->执行useEffect()调度accessTokenfirebase_userId.redux store

组件调度accessTokenfirebase_userId

const [accessToken, setAccessToken] = useState("");
const [firebase_userId, setFirebase_userId] = useState("");

const dispatch = useDispatch();

//listens for state of accessToken and firebase_userId to be set
useEffect(() => {
    dispatch({
      type: "access_token",
      payload: accessToken
    });
  }, [accessToken]);

  useEffect(() => {
    dispatch({
      type: "firebase_userId",
      payload: firebase_userId,
    });
  }, [firebase_userId]);


function onSignIn(){
...//Signs in to firebase and returns accessToken and firebase_userId

//set the state of the component with retrieved values

 setAccessToken(googleUser.accessToken);
 setFirebase_userId(result.user.uid);


}

REDUX 商店

import React from "react";
import symbolicateStackTrace from "react-native/Libraries/Core/Devtools/symbolicateStackTrace";
import { applyMiddleware, createStore } from "redux";
import thunk from "redux-thunk";

const initialState = {
  access_token: "",
  firebase_userId: "",
};

const counterReducer = (
  state = initialState,

  if (action.type === "access_token") {
   
    return {
      ...state,
      access_token: action.payload,
    };
  }

  if (action.type === "firebase_userId") {
   
   
    return {
      ...state,
      firebase_userId: action.payload,
    };
  }

  return state;
};

const store = createStore(counterReducer, applyMiddleware(thunk));

export default store;

标签: javascriptreactjsfirebasereact-nativeredux

解决方案


推荐阅读