reactjs - 如何使用 useSelector for chartjs 在 combineReducers 文件中访问和显示多个减速器？

Question

**当我有多个减速器时我遇到了问题，例如比特币：bitcoinReducers，以太坊：ethReducer。添加两个 useSelector 时，使用 useSelector 会覆盖比特币数据，而不是同时显示这两个数据。回报显示如下所述的比特币数据。

比特币减速器

const initialState = {
  loading: false,
  data: {
   labels: [],
  datasets: [
  {
    label: "BTC",
    data: [],
    backgroundColor: "rgba(238,175,0,0.4)",
    borderColor: "rgba(238,175,0,0.5)",
    pointBorderColor: "rgba(238,175,0,0.7)"
  }

  ]
 }
 };

const bitcoinReducer = (state = initialState, action) => {
const { type, payload } = action;

switch (type) {
case "AWAITING_BITCOIN":
  return {
    ...state,
    loading: true
  };
case "REJECTING_BITCOIN":
  return {
    ...state,
    loading: false
  };

case "SUCCESSFUL_BITCOIN":
  return {
    ...state,
    loading: false,
    data: {
      labels: payload.labels,

      datasets: [
        {
          label: "BTC",
          data: payload.data,
          backgroundColor: "rgba(238,175,0,0.4)",
          borderColor: "rgba(238,175,0,0.5)",
          pointBorderColor: "rgba(238,175,0,0.7)"
        }
      ]
    }
  };
default:
  return state;
}
};

以太坊减速器

const initialState = {
loading: false,
data: {
labels: [],
datasets: [
 


  {
    label: "ETH",
    data: [],
    backgroundColor: "rgba(0, 242, 255, 1)",
    borderColor: "rgba(0, 242, 255, 1)",
    pointBorderColor: "rgba(238,175,0,0.7)"
  }
]
}
};

const ethReducer = (state = initialState, action) => {
 const { type, payload } = action;

switch (type) {
case "AWAITING_ETH":
  return {
    ...state,
    loading: true
  };
case "REJECTING_ETH":
  return {
    ...state,
    loading: false
  };

case "SUCCESSFUL_ETH":
  return {
    ...state,
    loading: false,
    data: {
      labels: payload.labels,

      datasets: [
        {
          label: "ETH",
          data: payload.data,
          backgroundColor: "rgba(0, 242, 255, 1)",
          borderColor: "rgba(0, 242, 255, 1)",
          pointBorderColor: "rgba(238,175,0,0.7)"
        }
      ]
    }
  };
default:
  return state;
 }
 };

根减速器：

import { combineReducers } from "redux";

import bitcoinReducer from "../reduces/bitcoinReducer.js";
 import ethReducer from "./ethReducer.js";


const rootReducer = combineReducers({
bitcoin: bitcoinReducer,
 eth: ethReducer,

 });

 export default rootReducer;

动作文件：

import axios from "axios";
 import "moment-timezone";

比特币行动

export const getDataMonthly = ({ time, number }) => async (dispatch) => {
try {
 dispatch({
  type: "AWAITING_BITCOIN"
});
// response - the data is from the json data the one we want are 'close' & 'time'

const month =
  "https://financialmodelingprep.com/api/v3/historical-price-full/BTCUSD?apikey=0eb6f89e352362a020ec0bec326e03ec";

const getMonth = await axios.get(month);

//console.log("response", getMonth);

const data = [];
const labels = [];

for (let i = 0; i < getMonth.data.historical.length; i++) {
  data.unshift(getMonth.data.historical[i].close); // the closing price data
  // the closing price data

  labels.unshift(getMonth.data.historical[i].label); // the date data


}

console.log("labels", labels);
console.log("data", data);

dispatch({
  type: "SUCCESSFUL_BITCOIN",
  payload: {
    data,
    labels
  }
});
 } catch (e) {
dispatch({
  type: "REJECTING_BITCOIN"
});
 }
  };
  import axios from "axios";
  import "moment-timezone";

以太坊行动

 export const getETHDataMonthly = ({ time, number }) => async (dispatch) => {
  try {
  dispatch({
  type: "AWAITING_ETH"
   });
// response - the data is from the json data the one we want are 'close' & 'time'

const month =
  "https://financialmodelingprep.com/api/v3/historical-price-full/ETHUSD?apikey=0eb6f89e352362a020ec0bec326e03ec";

const getEthMonth = await axios.get(month);

//console.log("response", getMonth);

const data = [];
const labels = [];

for (let i = 0; i < getEthMonth.data.historical.length; i++) {
  data.unshift(getEthMonth.data.historical[i].close); // the closing price data
  // the closing price data

  labels.unshift(getEthMonth.data.historical[i].label); // the date data

 
}


dispatch({
  type: "SUCCESSFUL_ETH",
  payload: {
    data,
    labels
  }
});
} catch (e) {
dispatch({
  type: "REJECTING_ETH"
});

} };

主要组件文件

function MarketData() {

const dispatch = useDispatch();



const state = useSelector((state) => state.bitcoin);
const stateEth = useSelector((state) => state.eth);





 const fetchData = (time) => {
//fetch data from redux using time or DWM
dispatch(
  getData({
    time: time,
    number: num
  })
 );

dispatch(
  getETHDataMonthly({
    time: time,
    number: num
  })
);

};

 return (
   <>


  

  <div className={"chart-Wrapper"}>
    <Line data={state.data} options={options} /> (Displays Bitcoin data) & wont allow double props.
  </div>
</>
);
}

标签： reactjsreduxreact-reduxchart.jsredux-thunk