javascript — React redux — как получить данные в каждом компоненте после ответа API, написанного в Reducer.

Реагировать на избыточность — как получить данные в каждом компоненте после ответа API, написанного на Reducer

Я новичок в редукции и реакции.

Я только что прошел какое-то учебное пособие по редуксу и приступил к реализации некоторых случаев иска. И один из вариантов, который мне действительно нужен, — это то, что мне нужно состояние, которое я должен получить во всех компонентах, так что это возможно с использованием редукса в качестве глобализированного состояния.

У меня есть сценарий, вызов API, и я должен получить этот ответ API во всех моих компонентах, используя Redux. Но этого не происходит.

У меня есть index.js как

 import React from "react"; import ReactDOM from "react-dom"; import App from "./App"; import { createStore } from "redux"; import allReducer from "./reducers"; import { Provider } from "react-redux"; import "./styles.css"; let store = createStore( allReducer, window.__REDUX_DEVTOOLS_EXTENSION__ {amp}amp;{amp}amp; window.__REDUX_DEVTOOLS_EXTENSION__() ); const rootElement = document.getElementById("root"); ReactDOM.render( {amp}lt;Provider store={store}{amp}gt; {amp}lt;App /{amp}gt; {amp}lt;/Provider{amp}gt;, rootElement ); 

Мой редуктор как

 var userArray = []; fetch("https://jsonplaceholder.typicode.com/users") .then(res ={amp}gt; res.json()) .then( result ={amp}gt; { console.log(result); userArray = result; }, error ={amp}gt; {} ); const IsLoggedReducer = (state, action) ={amp}gt; { console.log(userArray); switch (action.type) { case "SIGNIN": return (state = userArray); case "LOGGEDOUT": return (state = userArray); default: return (state = userArray); } }; export default IsLoggedReducer; 

и мой app.js как

 import React from "react"; import { useSelector } from "react-redux"; function App() { const counter1 = useSelector(state ={amp}gt; state.counterReducer); const isLogged = useSelector(state ={amp}gt; state.IsLoggedReducer); return ( {amp}lt;h1{amp}gt; This {counter1} {amp}lt;ul{amp}gt; {isLogged.length {amp}gt; 0 ? isLogged.map(item ={amp}gt; { return {amp}lt;li key={item.id}{amp}gt;{item.name}{amp}lt;/li{amp}gt;; }) : "No data"} {amp}lt;/ul{amp}gt; {amp}lt;/h1{amp}gt; ); } export default App; 

при первоначальной загрузке он приходит как нулевой массив, а когда я делаю некоторые изменения в компоненте и сохраняю его, он получает данные и заполняется.

Вот код https://codesandbox.io/embed/quirky-sunset-s95gu?fontsize=14

Любая помощь высоко ценится

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector